本文介紹了javascript瀑布流列式佈局的相關內容,分享給大家供大家參考,具體內容如下
JS原理
上面說了,列式佈局簡直算是完虐絕對式佈局. 絕對式佈局,簡直就像10元/天 的搬磚工。而列式佈局就是站在那看他搬磚的監工。 同樣都是搬磚的,一個賣苦力,一個秀智商。簡直了! ! !
聽了逼逼,我們來直面一下慘淡的人生。
列式佈局的原理其實和絕對式佈局沒有太大的卻別。
同樣也有3個部分, 一是頁面載入自適應,二是滑動加載,三是響應式佈局。
分別講解:
1、載入自適應
我們先看一下程式碼吧:
var $ = function() { //一个hacks return document.querySelectorAll.apply(document, arguments); } var waterFall = (function(){ //初始化布局 var arrHeight = []; //列的高度 var columns = function() { //计算页面最多可以放多少列 var bodyW = $('#container')[0].clientWidth, pinW = $(".column")[0].offsetWidth; return Math.floor(bodyW / pinW); } //设置瀑布流居中 var getHtml = function() { var cols = $('.column'), //获得已有的列数 arrHtml = []; for (var i = 0, col; col = cols[i++];) { var htmls = col.innerHTML.match(/<img(?:.|\n|\r|\s)*?p>/gi); //获取一个columns的 arrHtml = arrHtml.concat(htmls); } return arrHtml; } //获得数组中最低的高度 var getMinIndex = function() { //获得最小高度的index var minHeight = Math.min.apply(null, arrHeight); //获得最小高度 for (var i in arrHeight) { if (arrHeight[i] === minHeight) { return i; } } } var createCol = function() { var cols = columns(), //获得列数 contain = $("#container")[0]; contain.innerHTML = ''; //清空数据 for (var i = 0; i < cols; i++) { var span = document.createElement("span"); span.className = "column"; contain.appendChild(span); } } //初始化列的高度 var initHeight = function() { var cols = columns(), arr = []; for (var i = 0; i < cols; i++) { arr.push(0); } arrHeight = arr; } //创建一个ele并且添加到最小位置 var createArticle = function(html){ var cols = $('.column'), index = getMinIndex(), ele = document.createElement('article'); ele.className = "panel";; ele.innerHTML = html; cols[index].appendChild(ele); arrHeight[index] += ele.clientHeight; } //遍历获得的html然后添加到页面中 var reloadImg = function(htmls) { for (var i = 0, html, index; html = htmls[i++];) { createArticle(html); } } var onload = function() { var contain = $("#container")[0], //获得容器 arrHtml = getHtml(); //获得现有的所有瀑布流块 //创建列,然后进行加载 createCol(); //初始化arrHeight initHeight(); //进行页面的重绘 reloadImg(arrHtml); return this; } })();
看見一個程序,先找他的入口函數,顯然,一開始應該是onload,那麼,觀察onload函數. 可以發現,裡面一共有4個函數.
由於使用者的寬度不確定,所以我們的列數也不是一定的。這時候,就需要取得實際尺寸然後進行一個計算才行。然後需要對原有的數據,進行重排。
所以,getHtml就是來取得一開始的原資料(innerHTML);
然後就可以更具寬度來新增列了。
createCol函數就是更具寬度來加入列的。
這時候,我們需要一個陣列(arrHeight)來保存每列的高(預設都為0).
然後就可以進行頁面重排=>reloadImg(arrHtml), arrHtml就是原始資料。
好,我們這裡初級搬磚完成。
接下來,是要開始加固了。
2、滑動加載
這個應該算是我直接copy過來的,所以說,函數寫的好,重用性也是棒棒噠。
show u code
var isLoad=function() { //是否可以进行加载 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, wholeHeight = document.documentElement.clientHeight || document.body.clientHeight, point = scrollTop + wholeHeight; //页面底部距离header的距离 var lastHei = Math.min.apply(null,arrHeight); return (lastHei < point) ? true : false; } var dealScroll = (function(){ window.onscroll = ()=>{dealScroll();} var container = $('#container')[0]; return function(){ if(isLoad()){ for(var i = 0,html,data;data = dataInt[i++]; ){ html = tpl.temp(data.src); //获得数据然后添加模板 createArticle(html); } } return this; } })();
同樣的isload,同樣的dealScroll的邏輯。 這裡要說明的就是,createArticle就是為最低高度列添加磚塊的函數。
然後,就沒有然後啦.
3、響應式版面
這我也是直接copy過來的。
var resize = (function(){ window.onresize = ()=>{resize();}; var flag; return function(){ clearTimeout(flag); flag = setTimeout(()=>{onload();},500); return this; }
需要說明的是,onload,dealScroll,resize這3個函數,後面我都加上"return this". 目的是可以進行鍊式調用,以備後面重用性的需要。
以上就是本文的全部內容,希望對大家學習javascript瀑布流有所幫助。