jQuery滝流プラグインWook mark使用例

プラグインのダウンロード:https://github.com/GBKS/Wookmark-jQuery公式ホームページ:http://www.wookmark.com/jquery-plugin
プラグインをダウンロードした後、ウェブページにプラグインを参照するJSファイル：

<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.wookmark.min.js"></script>

HTMLコード構造：

 <ul id="tiles">
  <li><img src="images/1.jpg"></li>
  <li><img src="images/2.jpg"></li>
  <li><img src="images/3.jpg"></li>
 </ul>
</div>

簡単な使い方：htmlファイルにコードを追加する

<br/> jQuery(function($){<br/>  $('#tiles li').wookmark();<br/> });<br/>&lt;/script&gt;</code></pre></root>

複雑な使い方：

<br/>jQuery(function($){<br/> $('#tiles li').wookmark({ //              <br/>  autoResize: true, //   true   window         ，    <br/>  container: $('#container'), //                   css  "position:relative"                   <br/>  offset: 12, //2          <br/>  itemWidth: 222, //       <br/>  resizeDelay: 50 //          50<br/> });<br/>});<br/>&lt;/script&gt;</code></pre></root>

wook markもajaxに協力して動的なデータのロードを実現することができますが、新規に追加したら再度実行する必要があります。

var handler = $('#tiles li');
handler.wookmark(options);

前にイベントがバインディングされている場合は、再実行前にクリアしてください。

handler.wookmarkClear();

の多くの人がローリングローディングについてどうやって使うかを聞いています。例を挙げて説明します。

var handler = null;
//      .
var options = {
    autoResize: true,
    container: $('#main'),
    offset: 2,
    itemWidth: 210
};

//      
function onScroll(event) {
    //     （          100px      ）.
    var closeToBottom = ($(window).scrollTop() + $(window).height() > $(document).height() - 100);
    if(closeToBottom) {
        //    AJAX     
        $.ajax({url:"data.html", dataType:"html", success:function(html){
            //          
            $('#waterfall').append(html);
            //       
            if(handler) handler.wookmarkClear();
            //    wookmark  
            handler = $('#waterfall li');
            handler.wookmark(options);
            }
        });
    }
};

$(document).ready(new function() {
    //  scroll  .
    $(document).bind('scroll', onScroll);
    //     .
    handler = $('#waterfall li');
    handler.wookmark(options);
});