首先非常感谢网友微笑的无私分享，此
Jquery特效是一款非常流行和实用的
瀑布流布局，核心代码只有几十行，是我见过代码量最少的瀑布流布局，非常适合网友们学习哦，希望大家好好看一下这个
Jquery特效的原代码，里面的每个功能注释写得非常详细。。
主要包括了以下几个功能函数：
1、瀑布流主函数
2、获取高度最小的列的函数
3、判断请求数据的开关的函数
4、请求数据加载的样式的函数
瀑布流核心代码如下：
function PBL(outer,boxs){
var pubu = $(outer);
var box = $(boxs);
var num = Math.floor($(document.body).width()/box.outerWidth());//根据浏览器宽度获得显示的列的数量
pubu.width(num*(box.outerWidth()));//给pubu的宽度赋值
var allHeight = [];//定义一个数组存储所有列的高度
for(var i=0;i<box.length;i++){
if (i<num) {
allHeight[i]=box.eq(i).outerHeight();
}else{
var minHeight = Math.min.apply({},allHeight);//获得所有的列中高度最小的列的高度
var sy = getSy(minHeight,allHeight);//获取高度最小的列的索引
getStyle(box.eq(i),minHeight,sy*box.eq(i).outerWidth(),i,2);
allHeight[sy] += box.eq(i).outerHeight();
}
}
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
瀑布流 网友微笑 图片延迟加载 json数据解析 数据分页 Jquery.masonry