瀑布流代码 带分页

 

Index.cshtml

@using PagedList.Mvc
@model PagedList.StaticPagedList<NationalUnion.Domain.Models.ProductModel.Product>

@{
    ViewBag.Title = "分享";
    Layout = "~/Views/Shared/_Layout.cshtml";
    Random rd = new Random();
    }
@section header{
    <link href="~/Content/PagedList.css" rel="stylesheet" />
    <style type="text/css">
        .Item {
            float: left;
            margin:5px;
            width:260px;
            border: 1px solid #CCC;
            position:absolute;
        }
        .ItemImg {
            width:260px;
            height:260px;
        }
        #ProductList {
            width:100%;
        }
        #loading {
            position:fixed;
            bottom:0px;
        }
        a img {
            border:none;
        }
    </style>
   
}
<div id="ProductList">
        @foreach (NationalUnion.Domain.Models.ProductModel.Product item in Model)
        {
            <div class="Item" >
                <dl>
                    <dt class="ItemImg">
                        <a onmouseover="" onmouseout="" href="@Url.Action("ProductDetails", new { ProductID=1})">
                            <img src="@item.ProImage" />
                        </a>
                    </dt>
                    <dd>
                        <div>@item.ProDesc</div>
                        <div><a href="@Url.Action("ProductDetails", new { ProductID=1})">分享</a><br /></div>
                    </dd>
                </dl>
            </div> 
        }
    </div>
<div id="loading" class="ContentFooter">
    <span class="loading"><img src="~/Content/Images/Loading.gif" /></span>
</div>
<div class="ClearBoth"></div>
<div id="ProductPager" class="ContentFooter">@Html.PagedListPager((PagedList.IPagedList)Model, x => Url.Action("Index", new { pageIndex = x }))</div>
     

@section scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            WaterFall({
                Container: $("#ProductList"),
                ItemMarginTop: 20,
                ItemMarginLeft:20,
                DataUrl:"@Url.Action("GetData", "Product", new { pageIndex = Request.QueryString["pageIndex"] == null ? "1" : Request.QueryString["pageIndex"].ToString() })"
            });
        });

        //begin---WaterFall
        function WaterFall(options) {
            options = options || {};
            options.Container = options.Container;//容器,必须
            options.DataUrl = options.DataUrl;//获取数据的URL
            options.ItemMarginTop = options.ItemMarginTop || 10;//每元素上边距
            options.ItemMarginLeft = options.ItemMarginLeft || 10;//每元素的左边距


            var itemArray = options.Container.children("div");//每项对象
            var itemQty = itemArray.length;//页面上元素的总数

            ///要改
            var itemWidth = itemArray[0].offsetWidth;//每项的宽度,必须itemArray[0].offsetWidth
            var requestIndex = 1;
            var containerWidth = options.Container.width();//容器的宽度
            var itemWidth = itemWidth;//每项的宽度
            var ColumnQty = parseInt(containerWidth / (itemWidth + options.ItemMarginLeft));//列数
            var marginTop = options.ItemMarginTop;//每项的上边距
            var marginLeft = options.ItemMarginLeft;//每项的左边距

            var ContainerOffset = options.Container.offset();//容器对象
            var ContainerLeft = ContainerOffset.left;//容器左边距
            var ContainerTop = ContainerOffset.top;//容器上边距


            var heighArray = [];//保存高度的数组(每一行的底部的位置)

            for (var i = 0; i < ColumnQty; i++) {//第一行数据
                itemArray[i].style.top = ContainerTop + "px";
                itemArray[i].style.left = ContainerLeft + marginLeft + i * (itemWidth + marginLeft) + "px";
                heighArray.push(itemArray[i].offsetHeight + ContainerTop);
            }
            for (var i = ColumnQty; i < itemQty; i++) {//其它行的
                SetItemPosition($(itemArray[i]));
            }
            SetContainerHeigh();

            //异步获取数据开始 begin
            function ScrollEven() {
                var miniHighIndex = GetMiniIndex(heighArray);//每行中最低高度的元素的索引

                var st= heighArray[miniHighIndex]; //var st = oArr[_getMinKey(oArr)];
                var scrollTop = document.documentElement.scrollTop > document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollTop;
                if (scrollTop >= st - document.documentElement.clientHeight) {//加载更多数据
                    window.onscroll = null;
                    requestIndex++;
                    $("#loading").show();
                    $.get(options.DataUrl + "&requestIndex=" + requestIndex, function (data) {
                        for (var i in data) {
                            var itemObj = $(CreatOneItem(data[i]));
                            //itemObj.css({ opacity: 0 });
                            //itemObj.appendTo(options.Container).animate({ opacity: 1 }, 3000, function () {
                            //    itemObj.height();
                            //});
                            itemObj.appendTo(options.Container);
                            SetItemPosition(itemObj);
                        }

                        SetContainerHeigh();
                        window.onscroll = ScrollEven;
                        $("#loading").hide();
                        ShowProductPager();
                    }, "json");
                }
            }//异步获取数据开始 end

            //设置元素的位置
            function SetItemPosition(itemObj) {
                var miniHighIndex = GetMiniIndex(heighArray);//每行中最低高度的元素的索引
                var top = heighArray[miniHighIndex] + marginTop + "px";//最小高度的元素高加上上边距
                var left = ContainerLeft + marginLeft + miniHighIndex * (itemWidth + marginLeft) + "px";
                itemObj.css({ "top": top, "left": left });
                heighArray[miniHighIndex] = heighArray[miniHighIndex] + itemObj.height() + marginTop;
            }

            //设置外部Container的高度
            function SetContainerHeigh() {
                var maxIndex = GetMaxIndex(heighArray);
                var maxHigh = heighArray[maxIndex];
                options.Container.height(maxHigh + marginTop);
            }

            window.onscroll = ScrollEven;
        }//end---WaterFall

        //得到数组中数据最小项的索引
        function GetMiniIndex(arrayObj) {
            var miniIndex = 0;
            if (arrayObj.length == 0) {
                return miniIndex;
            }
            var miniValue = arrayObj[0];
            for (var i in arrayObj) {
                if (miniValue > arrayObj[i]) {
                    miniValue = arrayObj[i];
                    miniIndex = i;
                }
            }
            return miniIndex;
        }

        //得到最大项的索引
        function GetMaxIndex(arrayObj) {
            var maxIndex = 0;
            if (arrayObj.length == 0) {
                return maxIndex;
            }
            var maxValue = arrayObj[0];
            for (var i in arrayObj) {
                if (maxValue < arrayObj[i]) {
                    maxValue = arrayObj[i];
                    maxIndex = i;
                }
            }
            return maxIndex;
        }

        ///创建单条数据
        function CreatOneItem(singlData) {
            var html = "";
            html += "<div class=\"Item\">";
            html += "<dl>";
            html += "<dt class=\"ItemImg\">";
            html += "<img src=\"" + singlData["ProImage"] + "\" />";
            html += "</dt>";
            html += "<dd>";
            html += "<div>" + singlData["ProDesc"] + "</div>";
            html += "<div><a href=\"#\">分享</a></div>";
            html += "<div><a href=\"@Url.Action("ProductDetails", new {ProductID=1 })\">详情</a></div>";
            html += "</dd>";
            html += "</dl>";
            html += "</div>";
            return html;
        }

        //显示分页控件
        function ShowProductPager() {
            var loadedCount = parseInt("@Model.PageSize");
            var itemCount = $("#ProductList>div").length;
            if (itemCount >= loadedCount) {
                $("#ProductPager").fadeIn();
                window.onscroll = null;//删除边滚动条的移动事件
            }
        }
    </script>
    }

View Code