用法:
html:
<div class="wf-container"></div>
// 初始化
var waterfallObj = new Waterfall({
containerSelector: '.wf-container',
minBoxWidth: 250
});
// 添加元素
var elem = document.createElement('h2');
elem.textContent = '一汽股份不履行承诺或早有预兆 律师称中小股东可起诉公司控股股东'
waterfallObj.addBox(elem)
源码:
(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; })()
相关推荐
微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)微信小程序源码 瀑布流布局(学习版)...
微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信小程序 瀑布流布局 (源码)微信...
微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+源码).zip 微信小程序——瀑布流布局(截图+...
微信小程序实现瀑布流布局demo源代码下载,实现瀑布流布局和无限下拉加载功能。 目录结构: pages — 存放项目页面文件 开发环境: 微信web开发者工具 v0.11.112301
瀑布流布局,http://blog.csdn.net/qq_18983205/article/details/72630547对应的代码
Android 瀑布流布局,这个演示例子定义了一个3列的图片瀑布流布局,每次加载15张图片,根据屏幕大小计算每列大小,判断操作是否滚动到最顶端和最底端,根据判断加载所有图片路径,并考虑防止内存溢出,获取真实宽高...
小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小程序源码 瀑布流布局 (代码+截图)小...
瀑布流是今年流行的一种页面布局方式,淘宝哇喔,蘑菇街,点点等都采用了瀑布流布局。花瓣主题集成了日志一键分享功能,对于提升网站流量非常有用。另外petal对于浏览器的兼容也是不错的,支持目前所有主流浏览器,...
纯css3实现横向瀑布流布局,让图片看起来更美观。
微信小程序图片瀑布流布局demo
瀑布流布局源码 js 瀑布流布局(每行代码都有详细注释)
利用 jQuery瀑布流布局,点击加载更多效果 同时还用layui实现了一些别的样式
原生JS瀑布流布局,无限加载
手摸手,带你实现移动端H5瀑布流布局.doc
masonry瀑布流布局滑动到底部加载更多demo
jQuery响应式图片瀑布流布局代码基于jquery-1.8.3.min.js制作,响应式设计,无限加载。
iOS-瀑布流布局
Android 瀑布流布局库源码。 交错网格视图支持多个大小不同的列和行,支持页眉和页脚。
jquery masonry瀑布流插件制作图片瀑布流布局代码,带点击小图出现大图代码
代码简介:jQuery瀑布流布局伸缩放大特效免费下载