jquery-Waterfall flow trickery practice sharing

Analysis: waterfall flow, 2 kinds of practices

(1) absolute Positioning scheme: Each cell is set to absolute positioning, through the calculation, set top separately, left can be achieved

(2) floating scheme: make n Column layout (floating), then the picture data, sequentially inserted, such as n is 3 columns, the first picture is inserted into the first column, the second picture is inserted into the second column, the third picture is inserted into the third column, the fourth picture is inserted into the first column ... This loop is inserted (not adaptive)

Examples of floating scenarios:

Preview Address : http://lgy.1zwq.com/wallPics/

CSS and HTML code:

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 Flow*/. 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;}

<Divclass= "Walllist"ID= "Walllist">        <ulclass= "Clearfix">            <Li></Li>            <Li></Li>            <Li></Li>        </ul>        <Pclass= "Loadtips"ID= "Loadtips"><span>Loading ...</span></P></Div>

Using jquery, the idea is as follows:

Bind window to the scroll event, pull down to get $ (document). ScrollTop () , then get the smallest height value in the N column, JS provides the API is Math.min (), but this API can only pass up to 2 parameters, So we need to use aplly to expand,

　　Math.min.apply (Null,[xxx,xxx,xxxx,xxxx]), when $ (document). ScrollTop () is greater than the minimum height value, on the AJAX request URL, if there is data, Inserts an HTML structure into the page without prompting "load up"

//Data Format    varTestjson = {        "Status": 1,        "Data":[            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x300/B5E61D/fff", "width": +, "height": +, "name": "Picture 1"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x210/333/fff", "width": +, "height": 2, "name": "Picture"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x190/f60/fff", "width": +, "height": $, "name": "Picture 3"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x230/B5E61D/fff", "width": +, "height": $, "name": "Picture 4"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x280/B5E61D/fff", "width": +, "height": 280, "name": "Picture 5"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x260/eee/fff", "width": +, "height": 260, "name": "Picture 6"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x180/000/fff", "width": +, "height": +, "name": "Picture 7"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x240/B5E61D/fff", "width": +, "height": +, "name": "Picture 8"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x265/B5E61D/fff", "width": +, "height": 265, "name": "Picture 9"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x245/259/fff", "width": +, "height": 245, "name": "Picture 10"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x310/B5E61D/fff", "width": +, "height": 310, "name": "Picture 11"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x210/B5E61D/fff", "width": +, "height": 12, "name": "Picture"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x150/B5E61D/fff", "width": +, "height": $, "name": "Picture 13"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x165/B5E61D/fff", "width": +, "height": 165, "name": "Picture 14"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x100/B5E61D/fff", "width": +, "height": +, "name": "Picture 15"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x280/B5E61D/fff", "width": +, "height": 280, "name": "Picture 16"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x225/B5E61D/fff", "width": +, "height": 225, "name": "Picture 17"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x210/B5E61D/fff", "width": +, "height": 18, "name": "Picture"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x230/B5E61D/fff", "width": +, "height": $, "name": "Picture 19"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x210/B5E61D/fff", "width": +, "height": 20, "name": "Picture"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x300/B5E61D/fff", "width": +, "height": +, "name": "Picture 21"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x210/333/fff", "width": +, "height": 22, "name": "Picture"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x190/f60/fff", "width": +, "height": $, "name": "Picture 23"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x230/B5E61D/fff", "width": +, "height": $, "name": "Picture 24"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x280/B5E61D/fff", "width": +, "height": 280, "name": "Picture 25"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x210/eee/fff", "width": +, "height": 26, "name": "Picture"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x180/000/fff", "width": +, "height": +, "name": "Picture 27"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x240/B5E61D/fff", "width": +, "height": +, "name": "Picture 28"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x195/B5E61D/fff", "width": +, "height": 195, "name": "Picture 29"},            {"href": "http:xxxxxxx", "src": "Http://dummyimage.com/240x245/259/fff", "width": +, "height": 245, "name": "Picture 30"}        ]    }        varWallpic =function(){        var$target = $ (' #wallList '), $li= $target. Find (' Li '), $tips= $ (' #loadTips '), OTop= 0,//values for scrolling judgmentrow = 3,//Number of columnspage = 1,//the page number value of the AJAX requesturl = ' xxxx ',//Ajax Request AddressOn_off =true;//plug-in structure switch to prevent AJAX error loading data multiple times        return{filldata:function(callback) {var_that = This; On_off=false; /*Ajax--------------------*/                //$.get (url,{page:page,count:30},function (JSON) {                //if (json.status==1) {                //_that.appendhtml (json.data);                //On_off = true;                //page++;                //}else{                //_that.loadedtips ();                //     }                //}, ' json ');                /*simulation test-set timer to simulate AJAX request data-----------------------*/SetTimeout (function(){                    //Simulation Termination                    if(page==3) {_that.loadedtips (); return;                    } _that.appendhtml (Testjson.data); On_off=true; Page++; },400); }, Appendhtml:function(data) {varLen =data.length, N= 0;  for(; n<len;n++){                    varK = 0; N> (row-1) k=n%row:k=N; $li [k].innerhtml+ = ' <a href= ' ' +data[n].href+ ' "target=" _blank "><span class= "name" > ' +data[n].name+ ' </span></a> ‘; }                 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 (' Data has been loaded ')); SetTimeout (function(){                    $(' #loadTips '). css ({' Visibility ': ' Hidden ')}); },200); //Unbind Event$ (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 ();