jquery实现瀑布流效果＋下拉加载新数据

瀑布流效果在很多网站还是有的，这种错落有致的排布看着还是很不错的呢。今天我就来记录一下关于用jquery实现瀑布流效果的代码；

一、页面基本排版
1. items盒子主要用来存放我们需要摆放的数据item；
2. tips是页面加载数据的时候用来提示用户的文本；

   <div class="wrapper">
        <div class="items">
            <div class="item"></div>
        </div>
        <p class="tips loading">正在加载...</p>
    </div>

二、css样式(控制提示语句摆放的位置，还有数据展示的样式)

body {
        text-align: center;
        margin: 0;
        padding: 0;
        background-color: #F7F7F7;
        font-family: '微软雅黑';
}

.wrapper {
        padding: 50px;
}

img {
        display: block;
        width: 100%;
        height: 300px;
}

.items {
        position: relative;
        padding-bottom: 10px;
}

.item {
        width: 228px;
        position: absolute;
        border: 1px solid #ddd;
}

.tips {
        width: 280px;
        height: 40px;
        margin: 30px auto 0;
        text-align: center;
        line-height: 40px;
        background-color: #CCC;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        position: fixed;
        bottom: 0px;
        left: 50%;
        margin-left: -140px;
        opacity: 0;
        color: #666;
}

.tips.loading {
         /*background-color: transparent;*/
        background-color: #dadada;
}

三、模版的引用（由于本例子中数据的展示样式都一致，在这里我引用模版artTemplate）关于此模版的具体使用，可以访问http://aui.github.com/有详细的讲解；

1. 记得要先引入这个模版的js包；
2. 定义模版的模块要有一个id，还有设置type；

    <script src="../js/template_native.js"></script>
    <script type="text/html" id="template">
        <% for(var i = 0; i < items.length; i++){ %>
            <div class='item'>
                <img src="<%=items[i].path%>" alt="">
                <p>
                    <%=items[i].text%>
                </p>
            </div>
            <% } %>
    </script>

四、js控制瀑布流的效果
1. 这里，我请求了两个php分别返回了两个模拟数据；

$(function() {
    //页面一加载就出现的图片，对应实际百度图片中点击搜索图片
    $.ajax({
        url: "./reset.php",
        dataType: "json",
        success: function(data) {
            var obj = {
                items: data
            };
            var result = template("template", obj);
            $(".items").html(result);
            waterfall();
        }
    });
});

// 编写瀑布流js

function waterfall() {
    //计算出显示盒子宽度
    var totalWidth = $(".items").width();
    //计算出单张图片宽度（每张图片宽度是一致的）
    var eachWidth = $(".items .item").width();
    //计算出一行能排布几张图片
    var columNum = Math.floor(totalWidth / eachWidth);
    //将剩余的空间设置成外边距
    var margin = (totalWidth - eachWidth * columNum) / (columNum + 1);
    //定义一个数组用来填充高度值
    var heightArr = [];
    for (var i = 0; i < columNum; i++) {
        heightArr[i] = 0;
    }

    //摆放位置 摆放在最小高度处
    var elementItems = $(".items .item");
    elementItems.each(function(idx, ele) {
        //取得一行中高度最小值及其索引
        //定义初始的最小值及其索引值
        var minIndex = 0;
        var minValue = heightArr[minIndex];
        for (var i = 0; i < heightArr.length; i++) {
            if (heightArr[i] < minValue) {
                minIndex = i;
                minValue = heightArr[i];
            }
        }

        $(ele).css({
            //注意点：这儿乘上的是最小值所在的索引idx
            left: margin + (margin + eachWidth) * minIndex,
            top: minValue
        });

        //重新计算高度，更新高度数组
        var oldHeight = heightArr[minIndex];
        oldHeight += $(ele).height() + margin;
        heightArr[minIndex] = oldHeight;
    });

    return heightArr;

}

$(window).on("scroll", function() {
    if (toBottom()) {
        $(".tips").css("opacity", 1);
        $.ajax({
            url: "./index.php",
            dataType: "json",
            success: function(data) {
                var dataItem = {
                    items: data
                };
                var res = template("template", dataItem);
                $(".items").append(res);
                waterfall();
                $(".tips").css("opacity", 0);
            }
        });
    }
});

//判断是否已经到底部了
function toBottom() {
    var scrollTop = $(window).scrollTop();
    var clientHeight = $(window).height();
    var offsetTop = $(".items .item:last-child").offset().top;
    console.log(scrollTop + "..." + clientHeight + "..." + offsetTop);
    if (scrollTop + clientHeight > offsetTop) {
        return true;
    } else {
        return false;
    }
}

五、最后在这里奉上的是自定义模拟数据，以及简单编写的php返回数据（别忘了，用此种方式获取数据的话，需要开启本地服务器哦～）；

如下为返回数据的基本模式，如果想要定义多条数据，只要多复制几条对象就可；

[
    {
        "path": "./images/1.jpg",
        "text": "中学时候我们班两个同学打赌，内容是在 厕所吃方便面，谁先吃完谁赢，输了的请 赢了的吃一个月的饭，于是厕所里惊现两 个货蹲坑上吃泡面，这俩货还没有决出胜 负，旁边拉屎的哥们都吐了三回了！！！"
    },
    {
        "path": "./images/2.jpg",
        "text": "亲戚有许多好兄弟，平时戏称为马哥，牛哥，等等动物名。一次，有人敲门，那时他儿子尚小，一开门，对着他爸妈就说：爸爸，妈妈，驴来了！"
    }
    ...
]

如下为php代码：

//reset.php
<?php
    $jsonString = file_get_contents('info/reset.json');
    $totalArr = json_decode($jsonString);
    echo  json_encode($totalArr);
 ?>

//index.php 这里规定一次返回三条数据
<?php
    $jsonString = file_get_contents('info/data.json');
    $totalArr = json_decode($jsonString);
    $randomKeyArr  = array_rand($totalArr,3);
    $templateArr = array();
    for ($i=0; $i <count($randomKeyArr) ; $i++) {
         $currentKey = $randomKeyArr[$i];
         $currentObj = $totalArr[$currentKey];
         $templateArr[$i] = $currentObj;
    }
    echo  json_encode($templateArr);
 ?>