摘要:瀑布流也應該算是流行幾年了吧。開始刷新的設置就很簡單了,瀑布流刷新只和一個事件有關,即,主要的算法即,當頁面滑動到最低高度的時候開始加載節點并且添加,當然,節點添加的個數是不固定的。這時候,就需要獲取實際尺寸然后進行一個計算才行。
瀑布流也應該算是流行幾年了吧。首先是由Pinterest掀起的浪潮,然后國內設計如雨后春筍般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不過最近涉黃,好像被喝茶了),還有淘寶的 “哇哦”. 這些都是很棒的例子, 今天我想重新談起瀑布流,一是想滿足我自己的愿望,寫一個詳細的介紹(不敢自名為教程),二是,給大家一份參考,因為search很多,但是他們給的是一個插件,然后教你怎樣配置,當然,也有很多其他的大神也細心的做了很多教程,比如 imooc上面 Amy 姐姐 發布的瀑布流教程,也是很棒的。 而我的目的就是,盡量把一些常見的demo給大家講解一遍,以及,融合以前學過的設計模式,相當于一個簡單的demo.
絕對式布局不多說,先看一個demo
絕對瀑布式布局
這個應該算是最常用的一個布局,但是他耗費的性能較高。不過,通過一些重構設計,這些都是可以避免的,我們詳細了解一下。
關于html和css,大家可以查看一下控制臺,或者直接copy一份都是可以的。
這是main 容器框內部的一個pin框,也是最基本的布局單元。(這里,要感謝迅雷UED提供的圖片) 而我們的頁面其實也是由pin單元拼接起來,在內部設置padding,形成間隔的效果。
.
這里就不詳細展開了。
接下來我們看一下js原理。
其實瀑布式主要的難點就在于,如果將圖片整齊的排列在對應的列下,以及什么時候開始刷新加載圖片。
而圖片整齊的排列的主要邏輯和算法即,先獲取容器內可以放多少列,然后,通過計算,存放第一列的高度,再遍歷剩下(除第一列的元素)的高度,分別放入,高度最小的那一列。 逐個添加,最后結束遍歷。
開始刷新的設置就很簡單了,瀑布流刷新只和一個事件有關,即,window.onscroll. 主要的算法即,當頁面滑動到最低高度的時候開始加載節點并且添加,當然,節點添加的個數是不固定的。
先上代碼吧,我這里分3部分講解,一個是圖片的排列,一個是設置加載的位置.另外再補充一個響應式加載。
var $ = function() { return document.querySelectorAll.apply(document, arguments); } var arrHeight = []; //得到分列的高度 var columns = function() { //計算頁面最多可以放多少列 var containerW = $("#main")[0].clientWidth, pinW = $(".pin")[0].offsetWidth; return Math.floor(containerW / pinW); } var getIndex = function(arr) { //獲得最小高度的index var minHeight = Math.min.apply(null, arr); //獲得最小高度 for (var i in arr) { if (arr[i] === minHeight) { return i; } } } //根據列數確定第一排img的高度并放入數組當中。 var setCenter = (function() { //通過列數設置寬度 var main = $("#main")[0]; //獲得罩層 var getPadding = function() { //設置padding var col = columns(); //獲得最后一列 var padding = main.clientWidth - col * $(".pin")[0].offsetWidth; return padding / 2; } var getComputedStyle = function(ele) { //兼容IE的支持情況 if (window.getComputedStyle) { return window.getComputedStyle(ele); } else { return ele.currentStyle; } } var getPinPad = function() { //獲得pin的padding值 var pin = $(".pin")[0]; return parseInt(getComputedStyle(pin).paddingLeft); } return function() { //設置寬度 main.style.padding = `0 ${getPadding()}px 0 ${getPadding()-getPinPad()}px`; } })(); var overLoad = function(ele) { var index = getIndex(arrHeight), minHeight = Math.min.apply(null, arrHeight), //獲取最小高度 pins = $(".pin"), style = ele.style; style.position = "absolute"; style.top = minHeight + "px"; //設置當前元素的高度 style.left = pins[index].offsetLeft + "px"; arrHeight[index] += ele.offsetHeight; } //初始化時執行函數 var init = function() { var pins = $(".pin"), col = columns(); setCenter(); //設置包裹容器的寬度 for (var i = 0, pin; pin = pins[i]; i++) { if (i < col) { //存儲第一排的高度 arrHeight.push(pin.offsetHeight); } else { overLoad(pin); //將元素的位置重排 } } }
里面一共有7個函數(大函數),一個變量。 說一下思路吧。 首先,頁面onload之后 執行的函數是 init. 要知道,一個js程序一定有他的入口,關鍵看你怎么找了。 然后我們深入init函數體,觀察。init里面執行的業務邏輯就是 存儲第一排元素的高度,然后重排剩下的元素。 通過columns函數來獲得當前窗口最多可以放下多少列,然后設置容器的居中(通過padding設置即可). 接下來,遍歷pin的單元框,將第一排的元素高度存放在arrHeight數組里,將剩下的元素進行重排。 其他的函數覺得沒什么講解的必要了。 我們著重來看一下overLoad函數.
overLoad
var overLoad = function(ele) { var index = getIndex(arrHeight), minHeight = Math.min.apply(null, arrHeight), //獲取最小高度 pins = $(".pin"), style = ele.style; style.position = "absolute"; style.top = minHeight + "px"; //設置當前元素的高度 style.left = pins[index].offsetLeft + "px"; arrHeight[index] += ele.offsetHeight; }
在overLoad里面有getIndex函數,獲取最小高度的index,然后就可以設置傳入進來的ele元素的位置(絕對定位), top為數組中最小高度的px值,left就為第一排制定的Index元素的左邊距位置。 最后更新一下高度,ok!!! that"s enough.
設置加載位置
var dataInt = [{ "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }, { "src": "1.jpg" }, { "src": "2.jpg" }, { "src": "3.jpg" }, { "src": "4.jpg" }]; function isLoad() { //是否可以進行加載 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, wholeHeight = document.documentElement.clientHeight || document.body.clientHeight, point = scrollTop + wholeHeight; //頁面底部距離header的距離 var arr = $(".pin"); var lastHei = arr[arr.length - 1].getBoundingClientRect().top; return (lastHei < point) ? true : false; } //處理滑動 var dealScroll = (function() { var main = $("#main")[0], flag = true; return function() { if (isLoad() && flag) { for (var i = 0, data; data = dataInt[i++];) { var div = document.createElement("div"); div.innerHTML = temp(data.src); div.className = "pin"; main.appendChild(div); overLoad(div); //和上面的overload有耦合性質 } flag = false; setTimeout(function() { //控制滑行手速,時間越長對速度的滑動時間影響越大。 flag = true; }, 200); } } })(); function temp(src) { return ``; }
其實,精華就在上一部分,這個只是作為一個加載數據的手段,當然,你可以點擊加載(手動觸發),或者其他的加載方法。 當然,怎么設置完全是取決于你的。 所以,隨大流,依然是通過下滑滾動加載。 繼續,找入口函數->dealScroll. 該函數執行的任務就是,通過isload函數,判斷是否可以進行加載判斷。 我們看一下isload函數,這個就是滾動加載的關鍵點.
function isLoad() { //是否可以進行加載 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, wholeHeight = document.documentElement.clientHeight || document.body.clientHeight, point = scrollTop + wholeHeight; //頁面底部距離header的距離 var arr = $(".pin"); var lastHei = arr[arr.length - 1].getBoundingClientRect().top; return (lastHei < point) ? true : false; }
通過計算得出,頁面底部距視口的位置(工具條下部) 與 最后一個元素的絕對位置比較,如果 滑動距離超過,則啟用加載。
yeah~ That"s over.
back to dealScroll
接下來就是看加載的部分了,這個部分其實也沒什么說的,就是創建一個div節點,然后將他放到容器的最后,并且通過overLoad函數來處理該節點的位置。 另外在該函數的末尾,我設置了一個控制滑動速度的trick,通過對函數的節流,防止有時候,請求過慢,用戶重復發送請求,造成資源浪費。
然后,這一部分也可以告一段落了。
響應式
最后一部分就是響應式了, 這部分,也超級簡單,只要你封裝性做的好,其實這一部分就是添加一個resize事件就over了。我們繼續找入口函數。
var resize = (function() { var flag; return function(fn) { clearTimeout(flag); flag = setTimeout(function() { //函數的節流,防止用戶過度移動 fn(); console.log("ok") }, 500); } })();
同樣,這里使用到了函數節流的思想,要知道,作為一個程序員,永遠不要以為 用戶 干不出什么 傻事. 比如,沒事的時候拖著瀏覽器窗口玩,放大,縮小,再放大... 其實,這事我經常干,因為沒有女朋友,寫代碼寫累了,就拖瀏覽器玩。 所以,考慮到我們單身狗的需求,使用函數節流是非常有必要的。 感興趣的童鞋,可以參考我前面的文章,進行學習。 說明一下,這里的回調函數指的就是init函數,但是 需要對init做些改動。詳見。
var update = function(ele) { //當resize的時候,重新設置 ele.style.position = "initial"; } //初始化時執行函數 var init = function() { var pins = $(".pin"), col = columns(); arrHeight = []; //清空高度 setCenter(); //設置包裹容器的寬度 for (var i = 0, pin; pin = pins[i]; i++) { if (i < col) { //存儲第一排的高度 arrHeight.push(pin.offsetHeight); update(pin); } else { overLoad(pin); //將元素的位置重排 } } }
上面需要加入update,對新的第一排元素進行更新。
然后就可以直接搬過來使用即可。
這就是絕對是布局的大部分內容了。
總結一下吧,這個部分我應該是,重構Amy的例子的,總的來說是遵循了,最少知識原則的,一個函數盡量不帶參數,就一定不帶參數了. 還有就是 一個函數 的書寫,不超過33行,并且盡量的實現細粒度表達,實現函數的重用。 當然,我寫的這一部分還是有很多問題的,js組織結構還是比較混論的,一些hack直接與主要業務邏輯放在一起。 我也相信,讀者們肯定有自己獨特的見解,寫出來的代碼,肯定比我好太多!!! (這個是肯定的.)
同樣,先看demo.
列式瀑布流
我們對比一下上面的,絕對式布局。 一個很大的卻別就是,頁面的計算量大大降低。 什么意思呢? 即,頁面重繪的次數減少,操作節點數減少,頁面布局更加清晰。
首先我們來看一下他的html內容。我這里就不貼出全部了,同樣,只列出一個基本單元。
上面就是一個基本的單元,需要注意的是,我們需要設置一個column表示一列。而span.panel就是一個基本磚塊。
好了,不在這地方磨嘰了。我們再來看一下scss.
$font:10px/1.5 sans-serif,"Microsoft YaHei","Arial"; html,body{ height: 100%; width: 100%; font:$font; background-color: #eee; } #container{ width:100%; height: 100%; position: relative; text-align: center; } .column{ display: inline-block; width:210px; vertical-align: top; padding:0 10px; .panel{ padding: 10px 0 10px 0; display: block; text-align: center; margin-bottom: 10px; border: 1px solid #ccc; background-color: #fff; text-decoration: none; } }
這我也不磨嘰了,scss這里需要引入normalize.scss進行和諧處理。
html和css介紹完了,我們要開始搬磚了。
上面說了,列式布局簡直算是完虐絕對式布局. 絕對式布局,簡直就像10元/天 的搬磚工。而列式布局就是站在那看他搬磚的監工。 同樣都是搬磚的,一個賣苦力,一個秀智商。簡直了!?。?br>聽了逼逼,我們來直面一下慘淡的人生。
列式布局的原理其實和絕對式布局沒有太大的卻別。
同樣也有3個部分, 一是頁面加載自適應,二是滑動加載,三是響應式布局。
分別講解:
我們先看一下代碼吧:
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(//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就是原始數據。
好,我們這里初級搬磚完成。
接下來,是要開始加固了。
這個應該算是我直接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就是給最低高度列添加磚塊的函數。
然后,就沒有然后啦.
這個我也是直接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". 目的是可以進行鏈式調用,以備后面重用性的需要。
最后說兩句響應式布局的流行真的很突然,慢慢的,慢慢的我沒有防備。 感覺在11年和12年的時候簡直就是一種風尚,而現在回味過來,看這個布局方法,感覺精髓依在的。 我們也可以進行變通,我們可以往右滑,右邊節點增加。 獲得抖抖手機,節點增加,這些都是可以完成的。(因為主要的邏輯我們已經有了,只是判斷增加的方式變了而已)。
我這里寫的一部分內容,應該算是(云網頁)吧。 大家有興趣可以直接拷貝到自己的IDE或者Sublime里面進行測試,數據都是放在云端的。
大家如果真的對前端有興趣的話,造輪子就是一個最好的辦法。就像我們小時候做計算題,事實上這些題目早就有了,已經有無數人做過。那我們做還有什么意義呢? 如果你這樣想的話,你已經把你自己給平庸化了(不是平凡化)。 你抱著的是一個,這個別人做過了,我做了又沒有什么用,還沒有別人做的好,我不想做。。。 但是,有沒有想過,為什么你叫這個名字,你為什么在這個城市長大,為什么能看到我寫的這篇文章。 因為道理很簡單,你就是一個很獨特的人, 你做的任何事情都是不可復制的。 當你寫瀑布流的時候,你瀏覽的網站,看過的資料,寫的代碼。這些串聯起來都是你最獨特的flag。 所以,造輪子不是waste 而恰恰相反是worthy,同樣就是code review一樣。只有自己做過才知道,這個東西,我真的知道。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78612.html
摘要:上一篇寫到了流,這篇文章著重談談輸入流,再下次再說輸出流。一輸入流字節流和字符流的操作方式幾乎完全一樣,只是操作的數據單元不同而已。返回結果為時表明到了輸入流的結束點。 親愛的樂字節的小伙伴們,小樂又來分享Java技術文章了。上一篇寫到了IO流,這篇文章著重 談談輸入流,再下次再說輸出流。 一、 輸入流 字節流和字符流的操作方式幾乎完全一樣,只是操作的數據單元不同而已 。字節流可 以操...
摘要:大家好,樂字節小樂又來了。上一篇給大家帶來的是中的流之輸入流樂字節,本文將繼續講述流之輸出流。一輸出流抽象類和和也非常相似。從上述的字節數組中,讀取字符串。 大家好,樂字節小樂又來了。上一篇給大家帶來的是:Java中的IO流之輸入流|樂字節,本文將繼續講述IO流之輸出流。showImg(https://segmentfault.com/img/bVbvQx1?w=600&h=338);...
摘要:微店技術團隊公眾號容器化之路這是一套以阿里云為基礎,為核心,第三方服務為工具的開發測試部署流程,以及內部的代碼提交,版本管理規范。如何打造安全的容器云平臺對,微服務,來說都是非常好的落地實踐技術。 在使用 flow.ci 進行持續集成的過程中,也許你會遇到一些小麻煩。最近我們整理了一些常見問題在 flow.ci 文檔之 FAQ,希望對你有用。如果你遇到其他問題,也可以通過「在線消息」或...
摘要:個人前端文章整理從最開始萌生寫文章的想法,到著手開始寫,再到現在已經一年的時間了,由于工作比較忙,更新緩慢,后面還是會繼更新,現將已經寫好的文章整理一個目錄,方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理 從最開始萌生寫文章的想法,到著手...
閱讀 1815·2023-04-26 01:55
閱讀 1078·2021-09-30 09:47
閱讀 1673·2019-08-30 15:54
閱讀 740·2019-08-30 15:53
閱讀 692·2019-08-30 15:52
閱讀 1133·2019-08-30 15:44
閱讀 2409·2019-08-30 14:06
閱讀 1057·2019-08-29 16:39