摘要:瀑布流布局中的圖片有一個核心特點等寬不定等高,瀑布流布局在國內網網站都有一定規模的使用,比如花瓣網等等。那么接下來就基于這個特點開始瀑布流探索之旅。
瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高,瀑布流布局在國內網網站都有一定規模的使用,比如pinterest、花瓣網等等。那么接下來就基于這個特點開始瀑布流探索之旅。
基礎功能實現首先我們定義好一個有 20 張圖片的容器,
...
由于未知的 css 知識點,絲襪最長的妹子把下面的空間都占用掉了。。。
接著正文,假如如上圖,每排有 5 列,那第 6 張圖片應該出現前 5 張圖片哪張的下面呢?當然是絕對定位到前 5 張圖片高度最小的圖片下方。
那第 7 張圖片呢?這時候把第 6 張圖片和在它上面的圖片當作是一個整體后,思路和上述是一致的。代碼實現如下:
Waterfall.prototype.init = function () { ... const perNum = this.getPerNum() // 獲取每排圖片數 const perList = [] // 存儲第一列的各圖片的高度 for (let i = 0; i < perNum; i++) { perList.push(imgList[i].offsetHeight) } let pointer = this.getMinPointer(perList) // 求出當前最小高度的數組下標 for (let i = perNum; i < imgList.length; i++) { imgList[i].style.position = "absolute" // 核心語句 imgList[i].style.left = `${imgList[pointer].offsetLeft}px` imgList[i].style.top = `${perList[pointer]}px` perList[pointer] = perList[pointer] + imgList[i].offsetHeight // 數組最小的值加上相應圖片的高度 pointer = this.getMinPointer(perList) } }
細心的朋友也許發現了代碼中獲取圖片的高度用到了 offsetHeight 這個屬性,這個屬性的高度之和等于圖片高度 + 內邊距 + 邊框,正因為此,我們用了 padding 而不是 margin 來設置圖片與圖片之間的距離。此外除了offsetHeight 屬性,此外還要理解 offsetHeight、clientHeight、offsetTop、scrollTop 等屬性的區別,才能比較好的理解這個項目。css 代碼簡單如下:
.waterfall-box { float: left; width: 200px; padding-left: 10px; padding-bottom: 10px; }
至此完成了瀑布流的基本布局,效果圖如下:
scroll、resize 事件監聽的實現實現了初始化函數 init 以后,下一步就要實現對 scroll 滾動事件進行監聽,從而實現當滾到父節點的底部有源源不斷的圖片被加載出來的效果。這時候要考慮一個點,是滾動到什么位置時觸發加載函數呢?這個因人而異,我的做法是當滿足 父容器高度 + 滾動距離 > 最后一張圖片的 offsetTop 這個條件,即橙色線條 + 紫色線條 > 藍色線條時觸發加載函數,代碼如下:
window.onscroll = function() { // ... if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) {// 瀏覽器高度 + 滾動距離 > 最后一張圖片的 offsetTop const fragment = document.createDocumentFragment() for(let i = 0; i < 20; i++) { const img = document.createElement("img") img.setAttribute("src", `images/${i+1}.png`) img.setAttribute("class", "waterfall-box") fragment.appendChild(img) } $waterfall.appendChild(fragment) } }
因為父節點可能自定義節點,所以提供了對監聽 scroll 函數的封裝,代碼如下:
proto.bind = function () { const bindScrollElem = document.getElementById(this.opts.scrollElem) util.addEventListener(bindScrollElem || window, "scroll", scroll.bind(this)) } const util = { addEventListener: function (elem, evName, func) { elem.addEventListener(evName, func, false) }, }
resize 事件的監聽與 scroll 事件監聽大同小異,當觸發了 resize 函數,調用 init 函數進行重置就行。
使用發布-訂閱模式和繼承實現監聽綁定既然以開發插件為目標,不能僅僅滿足于功能的實現,還要留出相應的操作空間給開發者自行處理。聯想到業務場景中瀑布流中下拉加載的圖片一般都來自 Ajax 異步獲取,那么加載的數據必然不能寫死在庫里,期望能實現如下調用(此處借鑒了 waterfall 的使用方式),
const waterfall = new Waterfall({options}) waterfall.on("load", function () { // 此處進行 ajax 同步/異步添加圖片 })
觀察調用方式,不難聯想到使用發布/訂閱模式來實現它,關于發布/訂閱模式,之前在 Node.js 異步異聞錄 有介紹它。其核心思想即通過訂閱函數將函數添加到緩存中,然后通過發布函數實現異步調用,下面給出其代碼實現:
function eventEmitter() { this.sub = {} } eventEmitter.prototype.on = function (eventName, func) { // 訂閱函數 if (!this.sub[eventName]) { this.sub[eventName] = [] } this.sub[eventName].push(func) // 添加事件監聽器 } eventEmitter.prototype.emit = function (eventName) { // 發布函數 const argsList = Array.prototype.slice.call(arguments, 1) for (let i = 0, length = this.sub[eventName].length; i < length; i++) { this.sub[eventName][i].apply(this, argsList) // 調用事件監聽器 } }
接著,要讓 Waterfall 能使用發布/訂閱模式,只需讓 Waterfall 繼承 eventEmitter 函數,代碼實現如下:
function Waterfall(options = {}) { eventEmitter.call(this) this.init(options) // 這個 this 是 new 的時候,綁上去的 } Waterfall.prototype = Object.create(eventEmitter.prototype) Waterfall.prototype.constructor = Waterfall
繼承方式的寫法吸收了基于構造函數繼承和基于原型鏈繼承兩種寫法的優點,以及使用 Object.create 隔離了子類和父類,關于繼承更多方面的細節,可以另寫一篇文章了,此處點到為止。
小優化為了防止 scroll 事件觸發多次加載圖片,可以考慮用函數防抖與節流實現。在基于發布-訂閱模式的基礎上,定義了個 isLoading 參數表示是否在加載中,并根據其布爾值決定是否加載,代碼如下:
let isLoading = false const scroll = function () { if (isLoading) return false // 避免一次觸發事件多次 if (scrollPX + bsHeight > imgList[imgList.length - 1].offsetTop) { // 瀏覽器高度 + 滾動距離 > 最后一張圖片的 offsetTop isLoading = true this.emit("load") } } proto.done = function () { this.on("done", function () { isLoading = false ... }) this.emit("done") }
這時候需要在調用的地方加上 waterfall.done, 從而告知當前圖片已經加載完畢,代碼如下:
const waterfall = new Waterfall({}) waterfall.on("load", function () { // 異步/同步加載圖片 waterfall.done() })項目地址
項目地址
此插件在 React 項目中的運用
項目簡陋,不足之處在所難免,歡迎留下你們寶貴的意見。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/51773.html
摘要:瀑布流布局中的圖片有一個核心特點等寬不定等高,瀑布流布局在國內網網站都有一定規模的使用,比如花瓣網等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高,瀑布流布局在國內網網站都有一定規模...
摘要:瀑布流布局中的圖片有一個核心特點等寬不定等高,瀑布流布局在國內網網站都有一定規模的使用,比如花瓣網等等。那么接下來就基于這個特點開始瀑布流探索之旅。 showImg(https://segmentfault.com/img/remote/1460000013059759?w=640&h=280); 瀑布流布局中的圖片有一個核心特點 —— 等寬不定等高,瀑布流布局在國內網網站都有一定規模...
摘要:為了保證在拿到圖片高度,也即圖片加載完成后再進行排列,我根據的推薦,選用了這一款插件。另外,在做一些圖片加載效果的時候也可以用到,比如說圖片未加載完成之前放個圖,加載失敗時放個錯誤提示什么的都很方便呢。 慣例,首先貼上imagesLoaded的官方網址:http://imagesloaded.desandro.com/ 第一次知道imagesLoaded這個插件是在做瀑布流布局時,當時...
摘要:前言最近在整理基礎知識,接觸到了幾個常用的頁面特效,其中覺得用原生實現瀑布流的案例十分有趣,于是與大家分享一下。瀑布流瀑布流,又稱瀑布流式布局。通過定位的方式是我們實現瀑布流的最基本的原理,只要我們動態的設置它的值值,就能讓它排列。 showImg(https://segmentfault.com/img/remote/1460000012621941?w=1052&h=542); 前...
摘要:本位為官方文檔翻譯,原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時會導致元素的重疊,可以解決這個問題。布局組件尺寸尺寸配置項和可以可以設置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。 本位為Masonry官方文檔翻譯,原始鏈接 安裝Install 下載 下載壓縮或未壓縮的masonry masonry.pkgd.min.js (壓縮...
閱讀 1038·2021-11-15 18:11
閱讀 3162·2021-09-22 15:33
閱讀 3458·2021-09-01 11:42
閱讀 2654·2021-08-24 10:03
閱讀 3615·2021-07-29 13:50
閱讀 2925·2019-08-30 14:08
閱讀 1274·2019-08-28 17:56
閱讀 2259·2019-08-26 13:57