原生JS实现响应式瀑布流布局

原生JS实现的瀑布流布局，代码及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 propertiesthis.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 constructorthis.compose（）; // handle the image or something which might change size after loadedvar 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 settingWaterfall.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 widthWaterfall.prototype.initColumns = function（num） {if（num > 0） {// create column divthis.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 columnWaterfall.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 coreWaterfall.prototype.compose = function（force） {var num = this.computeNumberOfColumns（）;var cols = this.columns.length; if（force || num ！= cols） {// remove old columnfor （var i = 0; i < this.columns.length; i++） {var columnElem = this.columns[i];columnElem.remove（）;} // init new columnthis.initColumns（num）; // composefor （var i = 0, l = this.boxes.length; i < l; i++） {var box = this.boxes[i];this.addBox（box）;}}} // add a new box to gridWaterfall.prototype.addBox = function（elem） {// push if new boxif（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;}）（）

以上所述就是本文给大家分享的全部内容了，希望能够对大家熟练使用javascript有所帮助。