jQUeryではmasonryとinfinitescrollを組み合わせて滝の流れを実現し、ドロップダウンロード

まずページに導入

<script src=”jquery-1.7.1.min.js”></script>
<script src=”jquery.masonry.min.js”></script>
<script src=”jquery.infinitescroll.js”></script>

bodyの内容を並べます.
 
   

jsでプラグインを呼び出すには、次の手順に従います.

<script type="text/javascript">
  $(function(){
    $('#container').masonry({
      // options     
      itemSelector : '.item',//class    
      columnWidth : 240 ,//      Integer
          isAnimated:true,//  jquery       Boolean
          animationOptions:{
            //jquery animate         Object { queue: false, duration: 500 }
          },
          gutterWidth:0,//     Integer
          isFitWidth:true,//        Boolean
          isResizableL:true,//         Boolean
          isRTL:false,//          Boolean
  });
});
</script>

画像divを並べ替える必要がある場合:
呼び出しが必要:

<script>
var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});
</script>

masonryプラグインを呼び出す方法のフォーマットは$('#container').masonry( ‘methodName’, [optionalParameters] )
例:
.masonry(‘appended’,$content,isAnimatedFromBottom)/containerに追加されたアイテムをトリガーする布
局masonry(‘destroy’)/masonryを完全に除去する機能は要素プリ初期化状態に戻る
.masonry(‘layout’,$items,callback)/プロジェクトのレイアウトを指定
.masonry(‘option’,options)//optionの設定
.masonry('reloadItems')/すべてのアイテムを現在の順序で再集約
.masonry(‘reload’)/予め考慮または挿入するための項目.masonry(‘reloadItems’)の簡略版
.masonry('remove',$items)/masonryインスタンスまたはdomからアイテムを削除
infinitescrollプラグインを呼び出すには、次の手順に従います.

$container.infinitescroll({
        navSelector : '#page-nav', //        
        nextSelector : '#page-nav a', //        
        itemSelector : '.box', //             
        loading: {
                finishedMsg: 'No more pages to load.',//      
                img: 'http://i.imgur.com/6RMhx.gif'//loading  
        }
},
//        masonry
function( newElements ) {
//            
        var $newElems = $( newElements ).css({ opacity: 0 });
//     masonry          
        $newElems.imagesLoaded(function(){
//             
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true );
        });
}
);