waterfall.js

一个压缩后不到2kb的瀑布流插件 依赖jquery

---

##兼容 支持ie6+（jquery版本需支持低版本ie）

---

##使用

###html

class可自定义，块内必须有图片

<div id="waterfall" class="waterfall">
    <div class="waterfall_item"><img src="xx_01.jpg" /></div>
	...
	<div class="waterfall_item"><img src="xx_20.jpg" /></div>
</div>

###css

.waterfall{
	position: relative;
}
.waterfall_item{
	position: absolute;
	top: 0;
	left: 0;

	opacity: 0;

	transition: opacity .2s, top .3s, left .3s, width .2s, height .2s;
}
.waterfall_item img{
	display: block;
	width: 100%;
}

###js

waterfall.init({
	box: '#waterfall',
	item: '.waterfall_item',
	columns: 4
});

---

##接口

###配置项

参数名	类型	默认值	说明
box	string	'.waterfall'	容器class
item	string	'.waterfall_item'	子项class
itemimg	string	'img'	子项中的img
columns	number	3	列数
between	string/number	'1%'	间距
isResize	boolean	true	是否响应容器变化
initcallback	function	返回容器的jquery对象	初始化完成后的回调函数

------- ```javascript waterfall.init({ // 容器class box: '.waterfall', // 子项class item: '.waterfall_item', // 子项img class itemimg: 'img', // 列数 columns: 3, // 间距 between: '1%', // 是否响应容器变化 isResize: true, // 渲染完成后回调 initcallback: function($box){} }); ``` -------

###方法

初始化瀑布流

waterfall.init();

设置参数

waterfall.set({
	columns: 3,
	between: 10
});

重置瀑布流

waterfall.reload();

图片异步加载

// 传入容器jquery对象及加载加载完成后的回调方法
waterfall.imgload($box, function(imgArr){
	// 例如，带有图片下标及宽高
	// imgArr[0]
	// { mid: 0, w: 100, h: 200 };
});

##版权 可任意使用并修改，请不要去掉头部注释