Teilen Sie Tipps zur Implementierung des Wasserfallflusses mit jQuery_jquery

Analyse: Wasserfallfluss, es gibt zwei Möglichkeiten

(1) Absolutes Positionierungsschema: Jede Zelle wird durch Berechnung auf absolute Positionierung eingestellt, oben und links können jeweils eingestellt werden

(2) Floating-Schema: Erstellen Sie ein N-Spalten-Layout (Floating) und fügen Sie dann die Bilddaten der Reihe nach ein. Wenn N beispielsweise 3 Spalten beträgt, wird das erste Bild in die erste Spalte eingefügt und das zweite Bild in die zweite Spalte eingefügt, das dritte Bild wird in die dritte Spalte eingefügt und das vierte Bild wird in die erste Spalte eingefügt ... Auf diese Weise wird es in eine Schleife eingefügt (kann nicht adaptiv sein)

CSS- und HTML-Code:

Code kopieren Der Code lautet wie folgt:

​body,ul,li{margin:0;margin:0;}
ul{list-style:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both; height:0;}.clearfix{*zoom:1}
/*Wasserfall*/
.wallList{width: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;}

Code kopieren Der Code lautet wie folgt:

          

                                                                                                                                                                                                                                                                                                                                                                                                                                                            

Laden...

Die allgemeine Idee bei der Implementierung mit jQuery lautet wie folgt:

(1) Holen Sie sich den kleinsten Höhenwert in Spalte N. Die von JS bereitgestellte API ist Math.min(), aber diese API kann höchstens 2 Parameter übergeben, daher müssen Sie aplly verwenden, um Math.min zu erweitern . apply(null,[xxx,xxx,xxxx,xxxx]) (2) Binden Sie das Scroll-Ereignis an das Fenster und rufen Sie beim Herunterziehen $(document).scrollTop() ab. Wenn $(document).scrollTop() größer als der Mindesthöhenwert ist, fordern Sie die URL mit Ajax an Daten, gehen Sie zur Seite. Wenn keine HTML-Struktur vorhanden ist, wird „Laden abgeschlossen“ angezeigt und das Fenster löst die Bindung dieses Ereignisses

Code kopieren

Der Code lautet wie folgt:

// 数据格式
    var testJson = {
        "status":1,
        "Daten":[
            {"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“}
        ]
    }
    var wallPic = function(){
        var $target = $('#wallList'),
            $li = $target.find('li'),
            $tips = $('#loadTips'),
oTop = 0, //Scrollender Beurteilungswert
              row = 3,//Anzahl der Spalten
                                                                                                                                                                                                                                                                           . ​​​​​​ url = 'xxxx', //Ajax-Anfrageadresse
On_off = TRUE; // Den Schalter der Struktur einfügen, um zu verhindern, dass AJAX die Daten mehrmals falsch lädt
        zurück{
             fillData:function(callback){
                                                                                                                                                                                      var _that = this; on_off = false;
                         /* ajax
---------*/
// $.get(url,{ page:page,count:30},function(json){
                                                                                                                                                                                                                                                 ​                                                                                                                                                                                                                                                                                          //                                                                                                                                                                                                                                                                                          //                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             //                                                 // },'json');
/* Simulationstest-Timer einstellen, um Ajax-Anfragedaten zu simulieren
-------------*/
                  setTimeout(function(){
// Simulation beendet
If(page==3){
                           _that.loadedTips();
                         zurück;
                                                                                                                                                                                           _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;
            },
            geladenTips:function(){
                $('#loadTips').find('span').text('数据已加载完');
                setTimeout(function(){
                    $('#loadTips').css({'visibility':'hidden'});
                },200);
                // 解绑事件
                $(window).unbind('scroll',$.proxy(this.scrollEvent,this));
            },
            scrollEvent:function(){
                if($(document).scrollTop() $(window).height()>oTop&&on_off){
                    this.fillData();                       
                }
            },
            init:function(){
                this.fillData();
                $(window).bind('scroll',$.proxy(this.scrollEvent,this));
            }
        }
    }();
    wallPic.init();