无法在 wordpress 中附加带有 jquery masonry 的项目

Question

我知道这里有很多关于砌体的问题，但我似乎无法找到可能是显而易见的解决方法的答案。我试图让附加方法工作：http://masonry.desandro.com/demos/adding-items.html，但是那些附加和前置按钮来自哪里？该代码似乎没有提到如何将这些按钮与脚本连接起来。我想添加一个加载更多按钮来附加下一组 wordpress 帖子，只是似乎无法在任何地方找到解决方案。如果有人能指出我正确的方向，将不胜感激。这是我的代码：

jQuery(document).ready(function($){

var $container = $('#linky');
var $boxes = $('<div class="boxy"/><div class="boxy"/><div class="boxy"/>');

$container.append( $boxes ).masonry( 'appended', $boxes );
$container.imagesLoaded( function(){
  $container.masonry({
    itemSelector : '.boxy',
    isFitWidth: true,
    singleMode: true,
    isAnimated: false,   

     }); 
   });
 });

Answer 1

查看该演示页面的源代码。如果您查看最底部，则单击这些按钮时会运行一段代码。它们是触发函数调用的原因。

<script>
  $(function(){

    var $container = $('#container');

    $container.masonry({
      itemSelector: '.box',
      columnWidth: 100,
      isAnimated: !Modernizr.csstransitions
    });

    $('#prepend').click(function(){
      var $boxes = $( boxMaker.makeBoxes() );
      $container.prepend( $boxes ).masonry( 'reload' );
    });

    $('#append').click(function(){
      var $boxes = $( boxMaker.makeBoxes() );
      $container.append( $boxes ).masonry( 'appended', $boxes );
    });

  });
</script>

$('#prepend').click(... 表示，单击 ID 为“prepend”的元素时，运行以下函数。如果您查看它们在页面上的按钮，它们是简单的按钮，其 ID 与本部分中的功能相匹配（ID 前置和附加。）

<button id="prepend">Prepend new items</button>
<button id="append">Append new items</button>