原生JS實(shí)現(xiàn)響應(yīng)式瀑布流布局
原生JS實(shí)現(xiàn)的瀑布流布局,代碼及demo代碼地址:https://github.com/leozdgao/responsive_waterfall
Demo:http://leozdgao.github.io/demo/responsive_waterfall/
演示圖:
核心代碼:
responsive_waterfall.js
(function() { var Waterfall = function(opts) { var minBoxWidth; Object.defineProperty(this, 'minBoxWidth', { get: function() { return minBoxWidth; }, set: function(value) { if(value < 100) value = 100; if(value > 1000) value = 1000; minBoxWidth = value; } }); opts = opts || {}; var containerSelector = opts.containerSelector || '.wf-container'; var boxSelector = opts.boxSelector || '.wf-box'; // init properties this.minBoxWidth = opts.minBoxWidth || 250; this.columns = []; this.container = document.querySelector(containerSelector); this.boxes = this.container ? Array.prototype.slice.call(this.container.querySelectorAll(boxSelector)) : []; // compose once in constructor this.compose(); // handle the image or something which might change size after loaded var images = this.container.querySelectorAll('img'), that = this; var clr; for (var i = 0; i < images.length; i++) { var img = images[i]; img.onload = function() { if(clr) clearTimeout(clr); clr = setTimeout(function() { that.compose(true); }, 500); } } window.addEventListener('resize', function() { that.compose(); }); } // compute the number of columns under current setting Waterfall.prototype.computeNumberOfColumns = function() { var num = Math.floor(this.container.clientWidth / this.minBoxWidth); num = num || 1; // at least one column return num; } // init enough columns and set the width Waterfall.prototype.initColumns = function(num) { if(num > 0) { // create column div this.columns = []; var width = (100 / num) + '%'; while(num--) { var column = document.createElement('div'); column.className = 'wf-column'; column.style.width = width; this.columns.push(column); this.container.appendChild(column); } } } // get the index of shortest column Waterfall.prototype.getMinHeightIndex = function() { if(this.columns && this.columns.length > 0) { var min = this.columns[0].clientHeight, index = 0; for (var i = 1; i < this.columns.length; i++) { var columnElem = this.columns[i]; if(columnElem.clientHeight < min) { min = columnElem.clientHeight; index = i; } } return index; } else return -1; } // compose core Waterfall.prototype.compose = function(force) { var num = this.computeNumberOfColumns(); var cols = this.columns.length; if(force || num != cols) { // remove old column for (var i = 0; i < this.columns.length; i++) { var columnElem = this.columns[i]; columnElem.remove(); } // init new column this.initColumns(num); // compose for (var i = 0, l = this.boxes.length; i < l; i++) { var box = this.boxes[i]; this.addBox(box); } } } // add a new box to grid Waterfall.prototype.addBox = function(elem) { // push if new box if(this.boxes.indexOf(elem) < 0) this.boxes.push(elem); var columnIndex = this.getMinHeightIndex(); if(columnIndex > -1) { var column = this.columns[columnIndex]; column.appendChild(elem); } } window.Waterfall = Waterfall; })()
以上所述就是本文給大家分享的全部?jī)?nèi)容了,希望能夠?qū)Υ蠹沂炀毷褂胘avascript有所幫助。
相關(guān)文章
JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法示例
這篇文章主要介紹了JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS數(shù)組遍歷、判斷、鍵值獲取等操作技巧,需要的朋友可以參考下2017-01-01JavaScript實(shí)現(xiàn)職責(zé)鏈模式概述
這篇文章主要介紹了JavaScript實(shí)現(xiàn)職責(zé)鏈模式概述,詳細(xì)的介紹了什么是職責(zé)鏈模式和實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01namespace.js Javascript的命名空間庫(kù)
命名空間的好處已經(jīng)耳熟能詳,但是JS中并沒有原生態(tài)支持命名空間,這個(gè)庫(kù)就是為js提供命名空間的功能。2011-10-10用javascript做一個(gè)小游戲平臺(tái) (二) 游戲選擇器
昨天晚上“設(shè)計(jì)”了n久,那些代碼都還沒有運(yùn)行起來,有點(diǎn)心急、有點(diǎn)郁悶。2010-01-01微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟
實(shí)際開發(fā)中很多時(shí)候我們需要通過上個(gè)頁面?zhèn)鬟^來的值動(dòng)態(tài)的更改標(biāo)題欄文字,下面這篇文章主要給大家介紹了關(guān)于微信小程序動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的實(shí)現(xiàn)步驟,需要的朋友可以參考下2023-02-02js創(chuàng)建數(shù)組的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄狫S創(chuàng)建數(shù)組的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07如何利用JavaScript?實(shí)現(xiàn)繼承
這篇文章主要介紹了如何利用JavaScript?實(shí)現(xiàn)繼承,JavaScript?在編程語言界是個(gè)特殊種類,它和其他編程語言很不一樣,JavaScript可以在運(yùn)行的時(shí)候動(dòng)態(tài)地改變某個(gè)變量的類型,下面小編將繼續(xù)介紹JavaScript如何實(shí)現(xiàn)繼承,需要的朋友可以參考下2022-02-02