詳解javascript實(shí)現(xiàn)瀑布流絕對(duì)式布局
瀑布流也應(yīng)該算是流行幾年了吧。首先是由Pinterest掀起的浪潮,然后國(guó)內(nèi)設(shè)計(jì)如雨后春筍般,冒出很多瀑布流的例子,比如,蘑菇街,Mark之(不過最近涉黃,好像被喝茶了),還有淘寶的 “哇哦”. 這些都是很棒的例子, 今天我們就聊一聊瀑布流。
一、絕對(duì)式布局:
JS實(shí)現(xiàn)原理
其實(shí)瀑布式主要的難點(diǎn)就在于,如果將圖片整齊的排列在對(duì)應(yīng)的列下,以及什么時(shí)候開始刷新加載圖片。
而圖片整齊的排列的主要邏輯和算法即,先獲取容器內(nèi)可以放多少列,然后,通過計(jì)算,存放第一列的高度,再遍歷剩下(除第一列的元素)的高度,分別放入,高度最小的那一列。 逐個(gè)添加,最后結(jié)束遍歷。
開始刷新的設(shè)置就很簡(jiǎn)單了,瀑布流刷新只和一個(gè)事件有關(guān),即,window.onscroll. 主要的算法即,當(dāng)頁(yè)面滑動(dòng)到最低高度的時(shí)候開始加載節(jié)點(diǎn)并且添加,當(dāng)然,節(jié)點(diǎn)添加的個(gè)數(shù)是不固定的。
先上代碼吧,我這里分3部分講解,一個(gè)是圖片的排列,一個(gè)是設(shè)置加載的位置.另外再補(bǔ)充一個(gè)響應(yīng)式加載。
1、圖片排列
var $ = function() { return document.querySelectorAll.apply(document, arguments); } var arrHeight = []; //得到分列的高度 var columns = function() { //計(jì)算頁(yè)面最多可以放多少列 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; } } } //根據(jù)列數(shù)確定第一排img的高度并放入數(shù)組當(dāng)中。 var setCenter = (function() { //通過列數(shù)設(shè)置寬度 var main = $('#main')[0]; //獲得罩層 var getPadding = function() { //設(shè)置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() { //設(shè)置寬度 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"; //設(shè)置當(dāng)前元素的高度 style.left = pins[index].offsetLeft + "px"; arrHeight[index] += ele.offsetHeight; } //初始化時(shí)執(zhí)行函數(shù) var init = function() { var pins = $(".pin"), col = columns(); setCenter(); //設(shè)置包裹容器的寬度 for (var i = 0, pin; pin = pins[i]; i++) { if (i < col) { //存儲(chǔ)第一排的高度 arrHeight.push(pin.offsetHeight); } else { overLoad(pin); //將元素的位置重排 } } }
里面一共有7個(gè)函數(shù)(大函數(shù)),一個(gè)變量。 說一下思路吧。 首先,頁(yè)面onload之后 執(zhí)行的函數(shù)是 init. 要知道,一個(gè)js程序一定有他的入口,關(guān)鍵看你怎么找了。 然后我們深入init函數(shù)體,觀察。init里面執(zhí)行的業(yè)務(wù)邏輯就是 存儲(chǔ)第一排元素的高度,然后重排剩下的元素。 通過columns函數(shù)來獲得當(dāng)前窗口最多可以放下多少列,然后設(shè)置容器的居中(通過padding設(shè)置即可). 接下來,遍歷pin的單元框,將第一排的元素高度存放在arrHeight數(shù)組里,將剩下的元素進(jìn)行重排。 其他的函數(shù)覺得沒什么講解的必要了。 我們著重來看一下overLoad函數(shù).
2、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"; //設(shè)置當(dāng)前元素的高度 style.left = pins[index].offsetLeft + "px"; arrHeight[index] += ele.offsetHeight; }
在overLoad里面有g(shù)etIndex函數(shù),獲取最小高度的index,然后就可以設(shè)置傳入進(jìn)來的ele元素的位置(絕對(duì)定位), top為數(shù)組中最小高度的px值,left就為第一排制定的Index元素的左邊距位置。 最后更新一下高度,ok!!! that's enough.
3、設(shè)置加載位置
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() { //是否可以進(jìn)行加載 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, wholeHeight = document.documentElement.clientHeight || document.body.clientHeight, point = scrollTop + wholeHeight; //頁(yè)面底部距離header的距離 var arr = $('.pin'); var lastHei = arr[arr.length - 1].getBoundingClientRect().top; return (lastHei < point) ? true : false; } //處理滑動(dòng) 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有耦合性質(zhì) } flag = false; setTimeout(function() { //控制滑行手速,時(shí)間越長(zhǎng)對(duì)速度的滑動(dòng)時(shí)間影響越大。 flag = true; }, 200); } } })(); function temp(src) { return ` <div class="box"> <img src="http://cued.xunlei.com/demos/publ/img/P_00${src}"/> </div> `; }
其實(shí),精華就在上一部分,這個(gè)只是作為一個(gè)加載數(shù)據(jù)的手段,當(dāng)然,你可以點(diǎn)擊加載(手動(dòng)觸發(fā)),或者其他的加載方法。 當(dāng)然,怎么設(shè)置完全是取決于你的。 所以,隨大流,依然是通過下滑滾動(dòng)加載。 繼續(xù),找入口函數(shù)->dealScroll. 該函數(shù)執(zhí)行的任務(wù)就是,通過isload函數(shù),判斷是否可以進(jìn)行加載判斷。 我們看一下isload函數(shù),這個(gè)就是滾動(dòng)加載的關(guān)鍵點(diǎn).
function isLoad() { //是否可以進(jìn)行加載 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop, wholeHeight = document.documentElement.clientHeight || document.body.clientHeight, point = scrollTop + wholeHeight; //頁(yè)面底部距離header的距離 var arr = $('.pin'); var lastHei = arr[arr.length - 1].getBoundingClientRect().top; return (lastHei < point) ? true : false; }
通過計(jì)算得出,頁(yè)面底部距視口的位置(工具條下部) 與 最后一個(gè)元素的絕對(duì)位置比較,如果 滑動(dòng)距離超過,則啟用加載。
yeah~ That's over.
back to dealScroll
接下來就是看加載的部分了,這個(gè)部分其實(shí)也沒什么說的,就是創(chuàng)建一個(gè)div節(jié)點(diǎn),然后將他放到容器的最后,并且通過overLoad函數(shù)來處理該節(jié)點(diǎn)的位置。 另外在該函數(shù)的末尾,我設(shè)置了一個(gè)控制滑動(dòng)速度的trick,通過對(duì)函數(shù)的節(jié)流,防止有時(shí)候,請(qǐng)求過慢,用戶重復(fù)發(fā)送請(qǐng)求,造成資源浪費(fèi)。
然后,這一部分也可以告一段落了。
4、響應(yīng)式
最后一部分就是響應(yīng)式了, 這部分,也超級(jí)簡(jiǎn)單,只要你封裝性做的好,其實(shí)這一部分就是添加一個(gè)resize事件就over了。我們繼續(xù)找入口函數(shù)。
var resize = (function() { var flag; return function(fn) { clearTimeout(flag); flag = setTimeout(function() { //函數(shù)的節(jié)流,防止用戶過度移動(dòng) fn(); console.log("ok") }, 500); } })();
同樣,這里使用到了函數(shù)節(jié)流的思想,要知道,作為一個(gè)程序員,永遠(yuǎn)不要以為 用戶 干不出什么 傻事. 比如,沒事的時(shí)候拖著瀏覽器窗口玩,放大,縮小,再放大... 其實(shí),這事我經(jīng)常干,因?yàn)闆]有女朋友,寫代碼寫累了,就拖瀏覽器玩。 所以,考慮到我們單身狗的需求,使用函數(shù)節(jié)流是非常有必要的。 感興趣的童鞋,可以參考我前面的文章,進(jìn)行學(xué)習(xí)。 說明一下,這里的回調(diào)函數(shù)指的就是init函數(shù),但是 需要對(duì)init做些改動(dòng)。詳見。
var update = function(ele) { //當(dāng)resize的時(shí)候,重新設(shè)置 ele.style.position = "initial"; } //初始化時(shí)執(zhí)行函數(shù) var init = function() { var pins = $(".pin"), col = columns(); arrHeight = []; //清空高度 setCenter(); //設(shè)置包裹容器的寬度 for (var i = 0, pin; pin = pins[i]; i++) { if (i < col) { //存儲(chǔ)第一排的高度 arrHeight.push(pin.offsetHeight); update(pin); } else { overLoad(pin); //將元素的位置重排 } } }
上面需要加入update,對(duì)新的第一排元素進(jìn)行更新。
然后就可以直接搬過來使用即可。
這就是絕對(duì)是布局的大部分內(nèi)容了,關(guān)于javascript瀑布流另一種布局方式請(qǐng)參考下一篇文章《詳解javascript實(shí)現(xiàn)瀑布流列式布局》。
- 原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
- 解析瀑布流布局:JS+絕對(duì)定位的實(shí)現(xiàn)
- 微信小程序通過js實(shí)現(xiàn)瀑布流布局詳解
- 純js實(shí)現(xiàn)瀑布流布局及ajax動(dòng)態(tài)新增數(shù)據(jù)
- 原生JS實(shí)現(xiàn)美圖瀑布流布局賞析
- JavaScript瀑布流布局實(shí)現(xiàn)代碼
- 原生js實(shí)現(xiàn)瀑布流布局
- JS實(shí)現(xiàn)瀑布流布局
- javascript瀑布流布局實(shí)現(xiàn)方法詳解
- js實(shí)現(xiàn)瀑布流布局(無(wú)限加載)
相關(guān)文章
數(shù)組方法解決JS字符串連接性能問題有爭(zhēng)議
大多數(shù)情況下,加法運(yùn)算符是首選;如果用戶主要使用IE6或7,并且字符串大小較大或數(shù)量較多時(shí),那么數(shù)組技術(shù)就很值得。2011-01-01原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換功能
本文主要介紹了使用原生javascript實(shí)現(xiàn)Tab選項(xiàng)卡切換的功能,雖然jQuery有很多類似的插件,單jQuery庫(kù)著實(shí)有點(diǎn)龐大,這種小功能還是直接用javascript來做就好了。2015-01-01ES6的Fetch異步請(qǐng)求的實(shí)現(xiàn)方法
這篇文章主要介紹了ES6的Fetch異步請(qǐng)求的實(shí)現(xiàn)方法,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12全面解讀TypeScript和JavaScript的區(qū)別
TypeScript和JavaScript是目前項(xiàng)目開發(fā)中較為流行的兩種腳本語(yǔ)言, TypeScript是JavaScript的一個(gè)超集,JavaScript是一種輕量級(jí)的解釋性腳本語(yǔ)言,本文主要介紹了兩者區(qū)別,感興趣的可以了解一下2023-09-09javascript跑馬燈抽獎(jiǎng)實(shí)例講解
這篇文章主要為大家介紹了javascript跑馬燈抽獎(jiǎng)特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01