jQuery_jquery を使用したウォーターフォール フローの実装に関するヒントを共有する

分析: 滝の流れ、それを行うには 2 つの方法があります

(1) 絶対配置スキーム: 各セルは、計算により上と左をそれぞれ設定できます

(2) フローティング方式: N 列のレイアウト (フローティング) を作成し、画像データを順番に挿入します。たとえば、N が 3 列の場合、1 番目の画像は 1 番目の列に挿入され、2 番目の画像は 1 番目の列に挿入されます。 2 列目に挿入、3 列目に 3 枚目の写真、1 列目に 4 枚目の写真を挿入... このようにループに挿入されます (アダプティブにはできません)

CSS および HTML コード:

コードをコピーします コードは次のとおりです:

ボディ,ul,li{マージン:0;マージン:0;}
ul{リストスタイル:なし;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
/*滝*/
.wallList{幅:860px;}
.wallList li{float:left;display:inline;margin-right:16px;}
.wallList li a{background:#eee;border:1px Solid #ccc;padding:5px 5px 0 5px;display:block;margin-bottom:10px;}
.wallList li a:hover{border-color:#f60;}
.wallList li .name{display:block;text-align:center;padding:8px 0;}
.loadTips{text-align:center;padding:15px 0;}

コードをコピーします コードは次のとおりです:

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 

読み込み中...

jQuery を使用して実装する場合の一般的な考え方は次のとおりです:

(1) N 列の最小の高さの値を取得します。JS が提供する API は Math.min() ですが、この API は最大 2 つのパラメーターしか渡せないため、Math.min を拡張するには aplly を使用する必要があります。 .apply(null,[xxx,xxx,xxxx,xxxx]) (2) スクロールイベントをウィンドウにバインドし、プルダウン時に $(document).scrollTop() を取得します。 $(document).scrollTop() が高さの最小値より大きい場合は、ajax で URL をリクエストします。データを挿入するには、ページに移動します。HTML 構造が存在しない場合は、「読み込み完了」というメッセージが表示され、ウィンドウがこのイベントのバインドを解除します

コードをコピー

コードは次のとおりです:

// データ格式
    var testJson = {
        「ステータス」:1、
        "データ":[
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"写真1"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"图片2"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"图片3"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片4"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片5"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x260/eee/fff","width":240,"height":260,"name":"图片6"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"图片7"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"图片8"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x265/B5E61D/fff","width":240,"height":265,"name":"图片9"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"图片10"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x310/B5E61D/fff","width":240,"height":310,"name":"图片11"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片12"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x150/B5E61D/fff","width":240,"height":150,"name":"图片13"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x165/B5E61D/fff","width":240,"height":165,"name":"图片14"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x100/B5E61D/fff","width":240,"height":100,"name":"图片15"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片16"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x225/B5E61D/fff","width":240,"height":225,"name":"图片17"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片18"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片19"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/B5E61D/fff","width":240,"height":210,"name":"图片20"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x300/B5E61D/fff","width":240,"height":300,"name":"图片21"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/333/fff","width":240,"height":210,"name":"图片22"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x190/f60/fff","width":240,"height":190,"name":"图片23"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x230/B5E61D/fff","width":240,"height":230,"name":"图片24"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x280/B5E61D/fff","width":240,"height":280,"name":"图片25"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x210/eee/fff","width":240,"height":210,"name":"图片26"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x180/000/fff","width":240,"height":180,"name":"图片27"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x240/B5E61D/fff","width":240,"height":240,"name":"图片28"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x195/B5E61D/fff","width":240,"height":195,"name":"图片29"},
            {"href":"http:xxxxxxx","src":"http://dummyimage.com/240x245/259/fff","width":240,"height":245,"name":"图片30"}
        ]
    }
    varwallPic = function(){
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
oTop = 0, //スクロール判定値
row = 3,//列数
。 url = 'xxxx', //ajaxリクエストアドレス
On_off = TRUE; // AJAX がデータを何度も誤ってロードするのを防ぐために、構造体のスイッチを挿入します
戻る{
fillData:function(callback){
var _that = this; on_off = false;
/* ajax
-----------------------*/
// $.get(url,{ page:page,count:30},function(json){
                                                                                                                                                                                                                                                 ​ //                                                                                                                                                     //                                                                                                                  ​                                                                                                                                                                                                                                                                                  ​ // // },'json');
/* Ajax リクエスト データをシミュレートするためのシミュレーション テスト セット タイマー
----------------------------*/
setTimeout(function(){
// シミュレーションが終了しました
If(page==3){
_that.loadedTips();
return;
                                                                                                                                                                             _that.appendHTML(testJson.data);
on_off = true;
                                               },400);
},
appendHTML:function(data){
var len = data.length,
n = 0;
for(;n var k = 0;
                    n>(row-1)?k=n%row:k=n;
                    $li[k].innerHTML = '' data[n].name '';
                }
                this.getOTop();
            }、
            getOTop:function(){
                oTop = Math.min.apply(null,[$li.eq(0).height(),$li.eq(1).height(),$li.eq(2).height()]) $target .offset().top;
            }、
            ロードされたヒント:function(){
                $('#loadTips').find('span').text('数架已加ダウンロード完');
                setTimeout(function(){
                    $('#loadTips').css({'visibility':'hidden'});
                },200);
                // 解绑イベント
                $(window).unbind('scroll',$.proxy(this.scrollEvent,this));
            }、
            スクロールイベント:function(){
                if($(document).scrollTop() $(window).height()>oTop&&on_off){
                    this.fillData();                       
                }
            }、
            init:function(){
                this.fillData();
                $(window).bind('scroll',$.proxy(this.scrollEvent,this));
            }
        }
    }();
    wallPic.init();