jQueryウォーターフォールフロープラグインWookmarkの使用例_jquery

プラグインのダウンロード: https://github.com/GBKS/Wookmark-jQuery 公式ホームページ: http://www.wookmark.com/jquery-plugin

プラグインをダウンロードした後、Web ページでプラグインの JS ファイルを参照します:

コードをコピーします コードは次のとおりです: HTML コード構造: コードをコピー コードは次のとおりです: 簡単な使用法: HTML ファイルにコードを追加します コードをコピー コードは次のとおりです: jQuery(function($){ $(' #tiles li').wookmark(); }); 複雑な使用法: コードをコピー コードは次のとおりです。 jQuery(function($){ $('#tiles li').wookmark({ //これはウォーターフォール フローを実装するオブジェクトです。layout autoResize: true, //ウィンドウ サイズが変更されたときにレイアウトが再レイアウトされることを示すには true に設定します。 container: $('#container' ), //これはコンテナの名前です。このコンテナには CSS 属性「position:relative」が含まれている必要があります。そうでない場合は、すべてがページの左上隅に押し込まれていることがわかります。 offset: 12, // 2 つの隣接する要素間の距離 itemWidth: 222, //指定されたオブジェクトの幅 assignDelay: 50 / /これは遅延効果です。 }); }) ; wookmark を 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) { //一番下まで到達したかどうか(ここで判定する)下から 100 ピクセル離れています) データを読み込み中). var closeToBottom = ($(window).scrollTop() $(window).height() > $(document).height() - 100); if(closeToBottom) { //AJAX によってロードされたデータは次のとおりです $.ajax({url:"data.html", dataType:"html", success:function(html){ // 新しいデータをオブジェクトに追加します $ ('#Waterfall'); // 元の位置をクリアします if (handler) handler.wookmarkClear (); // 新しい Wookmark オブジェクトを作成します handler = $('#waterfall li'); handler.wookmark(options) 🎜> $(document).ready(new function() { //バインドスクロールイベント. $(document).bind('scroll', onScroll); //最初のレイアウト. handler = $('#waterfall li'); handler.wookmark(オプション); });