分享原创Jquery实现瀑布流特效

此 Jquery特效是一款非常流行和实用的 瀑布流布局，核心代码只有几十行，是我见过代码量最少的瀑布流布局，非常适合网友们学习哦，希望大家好好看一下这个 Jquery特效的原代码，里面的每个功能注释写得非常详细。。


主要包括了以下几个功能函数：
1、瀑布流主函数
2、获取高度最小的列的函数
3、判断请求数据的开关的函数
4、请求数据加载的样式的函数

瀑布流核心代码如下：

 

01	function PBL(outer,boxs){

02	var pubu = $(outer);

03	var box = $(boxs);

04	var num = Math.floor($(document.body).width()/box.outerWidth());//根据浏览器宽度获得显示的列的数量

05	pubu.width(num*(box.outerWidth()));//给pubu的宽度赋值

06	var allHeight = [];//定义一个数组存储所有列的高度

07	for(var i=0;i<box.length;i++){

08	if (i<num) {

09	allHeight[i]=box.eq(i).outerHeight();

10

}else{

11	var minHeight = Math.min.apply({},allHeight);//获得所有的列中高度最小的列的高度

12	var sy = getSy(minHeight,allHeight);//获取高度最小的列的索引

13	getStyle(box.eq(i),minHeight,sy*box.eq(i).outerWidth(),i,2);

14	allHeight[sy] += box.eq(i).outerHeight();

15

}

16

}

17

}

效果如下：

 

在线演示和下载：http://www.jq-school.com/Detail.aspx?id=162