Deep Learning about js waterfall stream layout and deep learning about js waterfall

Deep Learning about js waterfall stream layout and deep learning about js waterfall

The examples in this article share the js waterfall stream layout learning materials for your reference. The specific content is as follows:

Features:Width and height.
Implementation Method:Javascript/Jquery/CSS3 multi-column layout.
Example Website: huaban Network --> category

I. JS implements waterfall stream

Index.html: Page Structure

<! DOCTYPE html> 
Layout.css: Page element style
*{  pdding:0;  margin:0;}div#main{  position: relative;}div.box{  padding:15px 0 0 15px;  float: left;}div.pic{  padding:10px;  border:1px solid #ccc;  border-radius:5px;  box-shadow: 0 0 5px #ccc;}.pic img{  height:auto;  width:165px;}
Waterfall. js
Window. onload = function () {waterFall ('main', 'box'); // simulate the json var dataInt = {"data": [{"src ": "0.jpg" },{" src ":" 1.jpg" },{ "src": "2.jpg" },{" src ":" 3.jpg" },{ "src": "4.jpg "}, {"src": "5.jpg" },{" src ":" 6.jpg"}]} window. onscroll = function () {if (checkScrollSlide) {// render the data block to the end of the current page var oParent = document. getElementById ("main"); for (var I = 0; I <dataInt. data. length; I ++) {var oBox = document. createElement ("div" ); OBox. className = "box"; oParent. appendChild (oBox); var oPic = document. createElement ("div"); oPic. className = "pic"; oBox. appendChild (oPic); var img = document. createElement ("img"); img. setAttribute ("src", dataInt. data [I]); img. src = "pic/" + dataInt. data [I]. src; oPic. appendChild (img);} dataInt = null; // clear data blocks to prevent infinite loading of waterFall ('main', 'box '); // layout rendering of new page elements} function waterFall (parent, box) {// set the class in main to box Var oParent = document. getElementById (parent); var oBoxs = getByClass (oParent, box); console. log (oBoxs. length); // calculate the number of columns displayed on the entire page (page width/box width) var oBoxW = oBoxs [0]. offsetWidth; // console. log (oBoxW); var cols?math.floor(document.doc umentElement. clientWidth/oBoxW); // console. log (cols); // set the width of the main oParent.style.css Text = "width:" + oBoxW * cols + "px; margin: 0 auto;" var hArr = []; // store the array for (var I = 0; I <oBoxs. l Ength; I ++) {if (I <cols) {hArr. push (oBoxs [I]. offsetHeight);} else {var minH = Math. min. apply (null, hArr); // obtain the minimum height of the current array // console. log (minH); var index = getMinhIndex (hArr, minH); // obtain the index of the minimum array height. // console. log (index); oBoxs [I]. style. position = "absolute"; // positions the subsequent images in sequence to oBoxs [I]. style. top = minH + "px"; oBoxs [I]. style. left = index * oBoxW + "px"; // calculate the position of the new image and assign the value hArr [index] + = oBoxs [I]. offsetHeight; // change the height value of the array column because an image is added }// Console. log (hArr) ;}}// obtain the element function getByClass (parent, clsName) based on the class {var boxArr = new Array (), // It is used to store the obtained element oElements = parent. getElementsByTagName ("*"); for (var I = 0; I <oElements. length; I ++) {if (oElements [I]. className = clsName) {boxArr. push (oElements [I]);} return boxArr;} function getMinhIndex (arr, val) {for (var I = 0; I <arr. length; I ++) {if (arr [I] = val) {return I ;}}// checks whether the condition funct is enabled for loading data blocks by the scroll bar. Ion checkScrollSlide () {var oParent = document. getElementById ("main"); var oBoxs = getByClass (oParent, "box"); var lastBoxH = oBoxs [oBoxs. length-1]. offsetTop + Math. floor (oBoxs [oBoxs. length-1]. offsetHeight/2); var scrollTop = document. body. scrollTop | document.doc umentElement. scrollTop; // obtain the scrollTop in mixed mode and standard mode // console. log (scrollTop); var height = document. body. clientHeight | document.doc umentElement. clientHeig Ht; // return (lastBoxH <scrollTop + height) for the browser window height in both hybrid and standard modes )? True: false; // check whether the last box height is smaller than the scroll height + window height. A boolean value is returned}
Ii. JQuery
$ (Window ). on ("load", function () {waterfall ('main', 'pin'); var dataInt = {'data': [{'src': '1.jpg '}, {'src': '2.jpg '}, {'src': '3.jpg'}, {'src': '4.jpg '}]}; window. onscroll = function () {if (checkscrollside () {$. each (dataInt. data, function (index, value) {var $ oPin = $ ('<div> '). addClass ('pin '). appendTo ($ ("# main"); var $ oBox =$ ('<div> '). addClass ('box '). appendTo ($ oPin); $ (' '). attr ('src ','. /image S/'+ $ (value ). attr ('src ')). appendTo ($ oBox) ;}); waterfall () ;}});/* parend parent id pin element id */function waterfall (parent, pin) {var $ aPin =$ ("# main> div"); var iPinW = $ aPin. eq (0 ). width (); // The width of the pin in a block box var num = Math. floor ($ (window ). width ()/iPinW); // Number of pins that can be accommodated in each row [window width divided by the width of a block] // oParent.style.css Text = 'width: '+ iPinW * num + 'px; ma rgin: 0 auto;'; // set the parent level Center style: width + automatic horizontal margin $ ("# main" detail .css ({'width :': IPinW * num, 'margin ': '0 auto'}); var pinHArr = []; // It is used to store the height of all block boxes in each column. $ APin. each (function (index, value) {var pinH = $ aPin. eq (index ). height (); if (index <num) {pinHArr [index] = pinH; // Add the num block box pin in the first row to the array pinHArr} else {var minH = Math. min. apply (null, pinHArr); // the minimum value of minH var minHIndex in the array pinHArr = $. inArray (minH, pinHArr); $ (value pai.css ({'position': 'absolute ', 'top': minH + 15, 'left': $ aPin. eq (minHIndex ). position (). left}); // The height of the minimum array height element + the added aPin [I] block height pinHArr [minHIndex] + = $ aPin. eq (index ). height () + 15; // update the column height after the block box is added});} function checkscrollside () {var $ aPin =$ ("# main> div "); var lastPinH = $ aPin. last (). get (0 ). offsetTop + Math. floor ($ aPin. last (). height ()/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 = $ (window ). scrollTop () // note the compatibility of var encryption enth = $ (document ). height (); // return (lastPinH <ScrollTop + incluenth )? True: false; // return true when the specified height is reached, triggering the waterfall () function}

3. CSS multi-Column Layout
. Container {-webkit-column-width: 160px;-moz-column-width: 160px;-webkit-column-gap: 5px;-moz-column-gap: 5px ;} /* data block bricks */. container div {width: 160px; margin: 4px 0 ;}
[Comparison of css3 and js implementation methods]
-- Css3 --
1: computing is not required. The browser automatically calculates the data. You only need to set the width of one column to ensure high performance.
2: The column width changes with the browser's wide port size, resulting in poor user experience;
3: The images are sorted in vertical order, disrupting the image display order.
4. js is required for image loading.
-- Js method --
The waterfall stream implemented by js does not have the following disadvantages, but the performance is relatively poor!
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.