Sharing tips on implementing waterfall flow with jQuery

Analysis: Waterfall flow, there are two ways to do it

(1) Absolute positioning scheme: Each cell is set to absolute positioning. Through calculation, top and left can be set respectively

(2) Floating scheme: Make N column layout (floating), and then insert the picture data in order. For example, if N is 3 columns, the first picture is inserted into the first column, and the second picture is inserted into the second column, the third picture is inserted into the third column, and the fourth picture is inserted into the first column... In this way, it is inserted in a loop (cannot be adaptive)

CSS and HTML code:

Copy code The code is as follows:

​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}

/*Waterfall*/

.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;}

Copy code The code is as follows:

Using jQuery to implement, the general idea is as follows:

(1) Get the smallest height value in column N. The API provided by JS is Math.min(), but this API can only pass in 2 parameters at most, so you need to use aplly to extend Math.min. apply(null,[xxx,xxx,xxxx,xxxx]) (2) Bind the scroll event to the window and get $(document).scrollTop() when pulling down. When $(document).scrollTop() is greater than the minimum height value, request the url with ajax. If there is data, go to the page. Insert the HTML structure. If there is no HTML structure, it will prompt "Loading Complete", and then the window will unbind this event

Copy code

The code is as follows:

// 数据格式
    var testJson = {
        "status":1,
        "data":[
            {"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, //Scrolling judgment value
              row = 3,//Number of columns
                                                                                                                                                                                                                                                                                         . url = 'xxxx', //ajax request address
On_off = TRUE; // Insert the switch of the structure to prevent AJAX from incorrectly loading the data many times
        return{
             fillData:function(callback){
                                                                                                                                                                                              var _that = this; on_off = false;
                         /* ajax
-----------------------*/
// $.get(url,{ page:page,count:30},function(json){
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           //                                                                                                                                                                                                                                                                                                       //                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          //                                                  // },'json');
/* Simulation test-set timer to simulate ajax request data
----------------------------*/
                  setTimeout(function(){
// Simulation terminated
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;
            },
            loadedTips: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();

Sharing tips on implementing waterfall flow with jQuery_jquery