瀑布流（JQuery 版 和js 最終版）

前臺：

<div class="container" id="container">
        <div class="box">
            <div class="box_img">
                <img src="images/0.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/1.jpg" />
            </div>
        </div>
        <div class="box">
            <div class="box_img">
                <img src="images/2.jpg" />
            </div>
        </div>

</div>

CSS   樣式：

*
{
    margin: 0px;
    padding: 0px;
}
.container
{
    position: relative;
}
.box
{
    padding: 5px;
    float: left;
}
.box_img
{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.box_img img
{
    width: 150px;
    height: auto;
}

JQuery:

var imgUrl;
$(document).ready(function () {
    $.ajax({
        "url": "/Handler/GetImgUrl.ashx",//獲取  json 數據
        "type": "post",
        "cache": false,
        "async": true,
        //"data": { "page": id },
        "dataType": "json",
        "error": function () { alert("error") },
        "success": function (data) {
            //alert(data);
            if (data != null) {
                //加載圖片
                imgUrl = data;
            } else {
                alert("加載失敗");
            }
        }
    });
    $(window).on("load", function () {
        imgLocation();
        window.onscroll = function () {
            if (scrollside()) {
                $.each(imgUrl, function (index, value) {
                    var box = $("<div>").addClass("box").appendTo($("#container"));
                    var content = $("<div>").addClass("box_img").appendTo(box);
                    //alert(imgUrl[index].Url);
                    $("<img>").attr("src", imgUrl[index].Url).appendTo(content);
                });
                imgLocation();
            }
        };
    });
});




function scrollside() {
    var box = $(".box");
    var lastboxheight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2);
    var documentheight = $(document).width();
    var scrollheight = $(window).scrollTop();
    return (lastboxheight < scrollheight + documentheight) ? true : false;
}




function imgLocation() {
    var box = $(".box");
    var boxwidth = box.eq(0).width();
    var num = Math.floor($(window).width() / boxwidth);
    var boxArr = [];
    box.each(function (index, value) {
        var boxheight = box.eq(index).height();
        if (index < num) {
            boxArr[index] = boxheight;
        } else {
            var minboxheight = Math.min.apply(null, boxArr);
            //alert(minboxheight);
            var minboxindex = $.inArray(minboxheight, boxArr);
            //alert(minboxindex);
            $(value).css({
                "position": "absolute",
                "top": minboxheight,
                "left": box.eq(minboxindex).position().left
            });
            boxArr[minboxindex] += box.eq(index).height();
        }
    });

JS （方法2）：

首先在頁面上加載5條，然後  js  去實現之後的數據的瀑布流效果：

var imgData;
function pubuliu() {

    imgLocation("container", "box")
    getData(2);

    window.onscroll = function () {
        if (checkFlag() && imgData != 0) {
            var cparent = document.getElementById("container");
            for (var i = 0; i < 1; i++) {
                var tiao = document.createElement("a");
                tiao.href = _root + "CustomerCenterDetail/" + imgData[i].ID;
                cparent.appendChild(tiao);
                var ccontent = document.createElement("div");
                ccontent.className = "box";
                tiao.appendChild(ccontent);
                var boximg = document.createElement("div");
                boximg.className = "box-img";
                ccontent.appendChild(boximg);
                var img = document.createElement("img");
                img.src = imgData[i].Url;
                boximg.appendChild(img);
                var boxtext = document.createElement("div");
                boxtext.className = "box-text";
                boxtext.innerHTML = imgData[i].TITLE;
                ccontent.appendChild(boxtext);
            }
            imgData.splice(0, 1);
            imgLocation("container", "box");
        }
    }
}


function getData(type) {
    $.ajax({
        "url": "/Handler/GetImgUrls.ashx", //獲取  json 數據
        "type": "post",
        "cache": false,
        "async": false,
        "data": { "type": type },
        "dataType": "json",
        "error": function () { alert("出錯了~~~聯繫管理員吧") },
        "success": function (data) {
            //alert(data);
            if (data != null) {
                //加載圖片
                imgData = data;
            } else {
                alert("加載失敗");
            }
        }
    });
}

function checkFlag() {
    var cparent = document.getElementById("container");
    var ccontent = getChildElement(cparent, "box");
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
    var lastimgHeight = ccontent[ccontent.length - 1].offsetHeight;
    cparent.style.height = lastContentHeight + lastimgHeight + "px";
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
    if (lastContentHeight < scrollTop + pageHeight) {
        return true;
    }
    console.log(lastContentHeight);
    console.log(scrollTop);
    console.log(pageHeight);
}


function imgLocation(parent, content) {
    //將parent下的所有content全部取出
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content);
    var imgWidth = 342;
    var num = 3;
    var BoxHeightArr = [];
    for (var i = 0; i < ccontent.length; i++) {
        if (i < num) {
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        } else {
            var minHeight = Math.min.apply(null, BoxHeightArr);
            var maxHeight = Math.max.apply(null, BoxHeightArr);
            var minIndex = getminheightLocation(BoxHeightArr, minHeight);
            //alert(maxHeight);
            //console.log(minHeight);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight + "px";
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
            BoxHeightArr[minIndex] = BoxHeightArr[minIndex] + ccontent[i].offsetHeight;
        }
    };

    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
    var lastimgHeight = ccontent[ccontent.length - 1].offsetHeight;
    var allHeight = lastContentHeight + lastimgHeight;
    var bigbigbig = [maxHeight, allHeight];
    var fainnalal = Math.max.apply(null, bigbigbig);
    cparent.style.cssText = "width:" + imgWidth * num + "px;margin:0 auto;height:" + fainnalal + "px";
}
function getminheightLocation(BoxHeightArr, minHeight) {
    for (var i in BoxHeightArr) {
        if (BoxHeightArr[i] == minHeight) {
            return i;
        }
    }
}
function getChildElement(parent, content) {
    var contentArr = [];
    var allcontent = parent.getElementsByTagName('*');
    for (var i = 0; i < allcontent.length; i++) {
        if (allcontent[i].className == content) {
            contentArr.push(allcontent[i]);
        }
    }
    return contentArr;
}

一般處理程序：

 string type = context.Request["type"].ToString();
            string sql = "";
            DataSet ds = null;
            if (type == "1")
                sql = " SELECT TOP 5 * FROM dbo.HT_CONTENT WHERE BELONG=3 ";
            else
                sql = " SELECT   * FROM  dbo.HT_CONTENT WHERE BELONG=3 AND id NOT IN(SELECT TOP 5 id FROM dbo.HT_CONTENT) ";


            ds = AosySql.ExecuteforDataSet(sql);
            var employees = "[";
            if (ds != null && ds.Tables[0].Rows.Count > 0)
            {
                foreach (DataRow row in ds.Tables[0].Rows)
                {
                    employees += "{\"ID\":\"" + row["ID"] + "\",\"Url\":\"" + row["IMG"] + "\",\"TITLE\":\"" + row["TITLE"] + "\",\"SOURCE\":\"" + row["SOURCE"] + "\"}" + ",";
                }
            }
            employees = employees.TrimEnd(',');
            employees += "]";
            context.Response.Write(employees);