0

ここでは石積みについて多くの質問があることは知っていますが、明らかな解決策となる可能性のあるものに対する答えを見つけることができなかったようです. 追加メソッドを機能させようとしています: http://masonry.desandro.com/demos/adding-items.htmlですが、これらの追加ボタンと前追加ボタンはどこから来るのですか? コードは、これらのボタンをスクリプトに接続する方法について言及していないようです。次の一連のワードプレス投稿を追加するための [さらに読み込む] ボタンを追加したいのですが、解決策がどこにも見つからないようです。誰かが私を正しい方向に向けることができれば、それは大歓迎です。これが私のコードです：

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,   

     }); 
   });
 });
4

1 に答える 1

0

そのデモ ページのソースを表示します。一番下を見ると、これらのボタンがクリックされたときに実行されるコードのセクションがあります。それらは、関数呼び出しをトリガーするものです。

<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>
于 2013-02-01T21:01:02.860 に答える