Implementation of javascript waterfall stream layout, javascript waterfall

Implementation of javascript waterfall stream layout, javascript waterfall

This article describes how to implement javascript waterfall stream layout. We will share this with you for your reference. The details are as follows:

Html structure:

<div id="waterfall">  <div class="mod-box">    <div class="mod-img">...</div>  </div>  <div class="mod-box">    <div class="mod-img">...</div>  </div>  <div class="mod-box">    <div class="mod-img">...</div>  </div></div>

Css style sheet:

*{margin:0;padding: 0}#waterfall{position: relative;}.mod-box{  padding: 15px 0 0 15px;  float: left;}.mod-img{  padding: 9px;  border: 1px solid #ccc;  border-radius: 5px;  box-shadow: 0 0 5px #ccc;  position: relative;}.mod-img img{  width: 310px;  height: auto;}

Javascript code:

Window. onload = function () {waterFall ("waterfall", "mod-box");} window. onscroll = scroll; window. onresize = function () {if (re) clearTimeout (re); var re = setTimeout (function () {waterFall ("waterfall", "mod-box ");}, 200);} var dataInit = {"data": [{"src": "5.jpg" },{" src ":" 6.jpg"}]}; /*** scroll to add a data function */function scroll () {var flag = checkScroll ("waterfall", "mod-box"); if (flag) {var oparent = docum Ent. getElementById ("waterfall"); var htmlStr = ""; var len = dataInit. data. length; for (var I = 0; I <len; I ++) {htmlStr + = ""; // STRUCTURE TO BE INSERTED} oparent. innerHTML + = htmlStr; waterFall ("waterfall", "mod-box "); // call it again}/*** waterFall function * @ param parentID container id * @ param clsName data block className */function waterFall (parentID, clsName) {var oParent = document. getElementById (parentID); // parent object // retrieve all the elements whose class is mod-box in the content Var oBoxs = getObjsByClassName (oParent, clsName); // get the array oBoxs var oBoxWidth = oBoxs [0] of the clsName bucket. offsetWidth; // obox width => 310 + 9*2 + 2 + 15 = 345 (including the border and padding) the width of a block box var pageWidth = document.doc umentElement. clientWidth; // visible page width // var pageWidth = document.doc umentElement. offsetWidth; // visual width of the page var cols = Math. floor (pageWidth/oBoxWidth); // calculate the number of columns displayed on the entire page (page width/obox width). The number of mod-boxes in each row var hAarr = []; // used to store The height of all block frames. Var minH; var minHIndex; // index value corresponding to the minimum height for (var I = 0; I <oBoxs. length; I ++) {// traverse each block frame element of the array aPin oBoxs [I]. style. position = "absolute"; if (I <cols) {// discharge the first row and record the height of each column to the data hAarr. push (oBoxs [I]. offsetHeight); oBoxs [I]. style. top = 0 + "px"; oBoxs [I]. style. left = oBoxWidth * I + "px";} else {minH = Math. min. apply (null, hAarr); // the minimum value of minH minHIndex = getMinhIndex (hAarr, minH) in the array hAarr; oBoxs [I]. style. top = minH + "px"; // oB Oxs [I]. style. left = oBoxWidth * minHIndex + "px"; oBoxs [I]. style. left = oBoxs [minHIndex]. offsetLeft + "px"; // The height of the minimum array height element + the height of the added aPin [I] block box hAarr [minHIndex] + = oBoxs [I]. offsetHeight; // update the column height after the block box is added} var maxH = Math. max. apply (null, hAarr); oParent.style.css Text = "width:" + oBoxWidth * cols + "px; margin: 0 auto; height:" + maxH + "px ;"; // set the parent-level Center style: fixed width + automatic horizontal margin}/*** check whether the data is loaded (scroll to the last oBox) * @ param parentID container id * @ param cl SName data block className * @ returns {boolean} */function checkScroll (parentID, clsName) {var parentObj = typeof parentID = "object "? ParentID: document. getElementById (parentID); var oBoxs = getObjsByClassName (parentObj, clsName); var lastBoxH = oBoxs [oBoxs. length-1]. offsetTop + Math. floor (oBoxs [oBoxs. length-1]. offsetHeight/2); // create the height of the waterfall () function that triggers the Add block box function: the last block frame is half the distance from the top of the page + its own height (loading starts when it is not rolled to the end) var scrolltop = document. body. scrollTop | document.doc umentElement. scrollTop; // standard mode and hybrid mode var height = document.doc umentElement. clientHeight; // page Height return (lastBoxH <scrolltop + height )? True: false;}/*** obtain the element * @ param id * @ param clsName * @ returns {Array} */function getObjsByClassName (parentID, clsName) based on the class) {var parentObj = typeof parentID = "object "? ParentID: document. getElementById (parentID); if (! ParentObj) {return;} var childObjs = parentObj. getElementsByTagName ("*"); // obtain all the subsets of the parent-Level var calssObjs = []; // create an array to collect sub-elements for (var I in childObjs) {// traverse sub-elements, determine categories, and press into the array if (childObjs [I]. className = clsName) {calssObjs. push (childObjs [I]) ;}return calssObjs ;} /*** obtain the minimum value of the index minIndex * @ param arr * @ param minH * @ returns {string} */function getMinhIndex (arr, minH) {for (var I in arr) {if (arr [I] === minH) {return I ;}}}