1

では、無限スクロールを石積みの流体レイアウトに追加または統合するにはどうすればよいでしょうか? 私はすでにグーグルで検索しましたが、理解できません。これまでに得たものは次のとおりです。

/**
 * Base js functions
 */

$(document).ready(function(){
    var $container = $('.container');

    var gutter = 20;
    var min_width = 270;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.box').width(box_width);

                return box_width;
              }
        });
    });
});

誰か助けてくれませんか？どうもありがとう！

4

1 に答える 1

2

組積造サイトで無限スクロールの例のソースコードを確認すると、組積造の初期設定後にすべての作業を実行する関数を確認できます。$ container.imagesLoaded関数の後に、Infinite Scroll構成を追加してから、コールバック関数でMasonryをトリガーします。また、jquery.masonry.min.jsの後に必ずjquery.infinitescroll.min.jsを含めてください。

そのページのJSは次のとおりです。

$(function(){

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

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 100
  });
});

// Infinite Scroll
$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation 
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true ); 
    });
  }
);

}）;

于 2012-11-24T06:24:01.747 に答える