网友微笑分享原创Jquery实现瀑布流特效

浏览数：35 / 时间：2015年06月09日

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

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

瀑布流代码如下：

JS与CSS代码

/**
 *    作者：微笑
 *    QQ：904835003
 *    邮箱：[email protected]
 *    支持原创、关注JquerySchool网站
 *    编写时间：2013-02-25
 */
$(window).load(function(){
    var data = [{"src":"images/3.jpg"},{"src":"images/4.jpg"},{"src":"images/5.jpg"},{"src":"images/6.jpg"},
        {"src":"images/7.jpg"},{"src":"images/8.jpg"},{"src":"images/9.jpg"},{"src":"images/10.jpg"}];
    PBL("#pubu",".box",1);
    var ajaxkey = true;//设置ajax请求的开关,如需动态加载、需要打开这个开关
    $(window).scroll(function(){
        if (getDataCheck() && ajaxkey) {

            //不调用getData时 的模拟数据如下
            var pubu = $("#pubu");
            for(i in data){
                var box = $("<div class=‘box‘><div class=‘pic‘><img src="+data[i].src+"></div></div>");
                pubu.append(box);
            }
            PBL("#pubu",".box",1);
            //getData（"#pubu",".box"）；//jquery的Ajax异步加载数据、需要从数据库加载的、需要调用该函数
        };
    });

})
/************************************************* ↓ 函数 ↓ */
//瀑布流主函数
function PBL(outer,boxs,style){//outer父级元素、boxs子级元素，style加载样式（ 1或者2 ）
    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,style);
            allHeight[sy] += box.eq(i).outerHeight();
        }
    }
}
//获取高度最小的列的索引
function getSy(minH,allH){
    for(sy in allH){
        if(allH[sy]==minH) return sy;
    }
}
//请求数据的方法
function getData(){
    ajaxkey = false;
    $.ajax({
        type:"get",//设置get请求方式
        url:"request.php",//设置请求的脚本地址
        data:"",//设置请求的数据
        dataType:"json",//设置请求返回的数据格式
        success:function(data){
            var pubu = $(‘#pubu‘);
            for(i in data){
                var box = $("<div class=‘box‘><div class=‘pic‘><img src="+data[i].src+"></div></div>");
                pubu.append(box);
            }
            PBL("#pubu",".box",2);
        },
        complete:function(){
            ajaxkey = true;
        }
    })
}
//判断请求数据的开关
function getDataCheck(){
    var pubu = $("#pubu");
    var box = $(".box");
    debugger;
    var lastboxHeight = $(box[box.length-1]).offset().top+Math.floor($(box[box.length-1]).outerHeight()/2);
    var documentHeight = $(window).height();
    var scrollTop = $(document).scrollTop();
    return lastboxHeight<documentHeight+scrollTop?true:false;
}
//存储开始请求数据条数的位置
var getStartNum = 0;
//设置请求数据加载的样式
function getStyle(boxs,top,left,index,style){
    if (getStartNum>=index) {
        return;
    }
    boxs.css("position","absolute");
    switch(style){
        case 1:
            boxs.css({
                "top":top+$(window).height(),
                "left":left
            });
            boxs.stop().animate({
                "top":top,
                "left":left
            },999);
        break;
        case 2:
            boxs.css({
                "top":top,
                "left":left,
                "opacity":"0"
            });
            boxs.stop().animate({
                "opacity":"1"
            },999);
    }
    getStartNum = index;//更新请求数据的条数位置
}

#pubu {
    margin:0 auto;
    position:relative;
}
#pubu .box {
    width:280px;
    height:auto;
    padding:10px;
    float:left;
}
#pubu .box .pic {
    width:280px;
    height:auto;
    box-shadow:1px 1px 4px #ddd,-1px -1px 4px #ddd;
    border-radius:4px;
}
#pubu .box .pic img {
    display: block;
    width:250px;
    margin:0 auto;
    padding: 15px 0;
    cursor: pointer;
}

CSS

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>网友微笑分享原创Jquery实现瀑布流特效</title>
<meta name="Keywords" contentcss,JquerySchool" />
<meta name="description" content="" />

<link rel="stylesheet" type="text/css" href="css/pubu.css">
<style type="text/css">
body {
    padding:0;
    margin:0;
    background:url(images/bg.jpg);
}
img {
    border:none;
}
a {
    text-decoration: none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <script>
        window.jQuery || document.write(‘<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>‘)
    </script>
<script type="text/javascript" src="js/pubu.js"></script>

</head>
<body>

    <div id="pubu">
    
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg">
            </div>
        </div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg">
            </div>
        </div>

    </div>
</body>
</html>