Home > Developer > Web Develop
Layout principle: Use a div named item as the container for the picture, each item is equal in width, highly adaptive, and uses absolute positioning. The first line of item only needs to deal with left and not to say it in detail. After the second line: Gets the height of the item to the first row as the height of the column, finds the smallest value, then the top value of item starting from the second line equals this value, and left equals the left of this column, and the height of this column is the height of the item currently being processed.
Attach detailed code
HTML section:
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <title></title></Head><Body> <DivID= "Picturewall"></Div></Body></HTML>
Css:
*{font-family:"Microsoft Yahei", Sans-serif;padding:0;margin:0; }#picturewall{width:940px;Height:Auto;margin:0 Auto;position:relative; }. Item{width:300px;Height:Auto;box-sizing:Border-box;Border:1px;-webkit-border-radius:5px;-moz-border-radius:5px;Border-radius:5px;-webkit-box-shadow:0 0 15px #666;-moz-box-shadow:0 0 15px #666;Box-shadow:0 0 15px #666;position:Absolute;text-align:Center; }. Item>img{Height:Auto;width:280px;Display:Block;margin:10px; }
Jquery:
$(function(){ //use an array to hold the file name of the picture varPicturesources = [ "31bbb105bf1ce318ffd72de5fd601614edda4cd61d278-ijoirf_fw658.jpg", "57a70575f8a78ffe9d65297e0f75be89a61f14fa3988b2-lgcvah_fw658.jpg", "6182b15541cb11f6de40ccd9be7239861ba946de26304a-p6giw6_fw658.jpg", "6c0898eb4b898db935c27f8c3319d54b34104e8b22fd8-oklgcv_fw658.jpg", "9d5992e5231864f09748b6d5f7b03165821bdb4bffc3e-0n27fj_fw658.jpg", "A1c7f703728f99e7e59fd8c9c250ef8536fa8ae0327fd7-uh635n_fw658.jpg", "C627789a24da25b438a3d86310e97612f697316bd970-yxuyg9_fw658.jpg", "D7e78fc59a0c102c282a154177ed730295634a241d907-elab1u_fw658.jpg", "Dcc0754632a597e2ab91ce85eabca8fa71842ac71647e-2prt4q_fw658.jpg" ]; varBase = "picture\/"; //the basic structure of the item element varBaseelem = $ ("<div class= ' item ' ></div>"). Append ("description); //functions to implement waterfall flow layout functionWaterfall () {varItems = $ ("Div.item");//gets all the elements of the class named item varPostop = [];//This array is used to store the height of item positioning varItemwidth = Items.eq (0). width () +10;//the width is the same, all right, just grab one.Items.each (function(Index,elem) {varTargetitemtop = Items.eq (index). Height () +10;//traverse all item and get the height if(Index < 3) {//if it's on the first linePostop[index] = targetitemtop;//Add the height directly to the array$ (elem). css ({"Left": 310*index,//Set Left"Top": 10//and Top }); }Else{ //Other Rows varMintop = Math.min.apply (NULL, postop);//gets the smallest one in the array varMinindex = $.inarray (mintop,postop);//gets the sort that corresponds to the minimum value of the array$ (elem). css ({"Top": mintop+10,//set top to the minimum value in the array' Left ':p arseint (Items.eq (minindex). CSS ("left"))//Set Left }); } Postop[minindex]+ = $ (elem). Height () +10;//updating an array }); } //Add the function of item functionGetItems () { for(vari = 0; i < picturesources.length; i++) {Baseelem.clone (). Hide (). Children ("img"). attr ("src", base+picturesources[i]). Bind ("Load",function() {waterfall (); $( This). Parent (). FadeIn (500); }). End (). AppendTo ("#picturewall"); } } //determine where a document scrolls functionWheellisten () {varSrollheight =$ (document). ScrollTop (); if(srollheight+$ (window). Height () >= $ (document). Height ()-100) {getItems (); } } //Binding Events$ (window). On ("Load",function() {getItems (); $ (document). Bind ("MouseWheel Dommousescroll",function() {Wheellisten (); }); }) });
：
By scrolling the mouse wheel can achieve unlimited loading of images, with Ajax basically completed.
jquery to achieve waterfall flow effect
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
