Question

我知道这里有很多关于砌体的问题，但我似乎无法找到可能是明显修复的答案。我正在尝试使用append方法：http://masonry.desandro.com/demos/adding-items.html，但那些Append和Prepend按钮来自哪里？代码似乎没有提到如何将这些按钮与脚本连接。我想添加一个加载更多按钮来附加下一组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与这部分的功能相匹配（ids prepend和append。）

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

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

1 个答案: