分享原创Jquery实现瀑布流特效_jq水样百分比特效-优快云博客

本文介绍了一款基于JQuery的瀑布流布局特效，代码简洁高效，仅几十行。主要功能包括瀑布流主函数、获取高度最小的列、判断请求数据开关及加载样式等。适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

瀑布流核心代码如下：

   
   01function  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}