原生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 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;

})()

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

js表单验证实例讲解

java.util.ArrayDeque类使用方法详解

mysql获取字符串长度函数(CHAR_LENGTH)

Fedora下安装php Redis扩展笔记

php+html5+ajax实现上传图片的方法

Windows 10降级指南 简单回滚至Windows 7/8.1的技巧

win10删除的文件怎么找回 win10回收站清空后恢复方法图解

php数组合并的二种方法

Win10如何卸载扬声器在硬件设备连接错误的情况下

WinXP热键小漏洞的秘密分享

jQuery设置单选按钮radio选中/不可用的实例代码

图文详解Java中class的初始化顺序

浅析php中jsonp的跨域实例

JS+CSS实现可以凹陷显示选中单元格的方法