瀑布流代码 带分页

 

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

 

代码

Index 

   [HttpGet]
        public ActionResult Index(int pageIndex=1)
        {
            int vTotalCount = 0;
            List<Domain.Models.ProductModel.Product> vListData = _proBll.GetProductInfo(pageIndex, 1, WATERFALLSIZE, AJAXSIZE, out vTotalCount);
            PagedList.StaticPagedList<Domain.Models.ProductModel.Product> vPageData = new PagedList.StaticPagedList<Domain.Models.ProductModel.Product>(vListData, pageIndex, WATERFALLSIZE, vTotalCount);
            return View(vPageData);
        }

 

GetData

    /// <summary>
        /// 
        /// </summary>
        /// <param name="pageIndex"></param>
        /// <returns></returns>
        public JsonResult GetData(int pageIndex = 1, int requestIndex = 1)
        {
            Random ro = new Random();
            //List<int> vListData = DataSource();
            //List<int> vJsonData = vListData.Skip((pageIndex - 1) * WATERFALLSIZE + (requestIndex - 1) * AJAXSIZE).Take(AJAXSIZE).ToList();
            //ProdcutListData();

            //List<Domain.Models.Product> vListData = ProdcutListData(pageIndex, out vTotalCount);
            int vTotalSize = 0;
            List<Domain.Models.ProductModel.Product> vListData = _proBll.GetProductInfo(pageIndex, requestIndex, WATERFALLSIZE, AJAXSIZE, out vTotalSize);
            return Json(vListData, JsonRequestBehavior.AllowGet);
        }

        /// <summary>
        /// 
        /// </summary>
        /// <param name="argpageIndex"></param>
        /// <param name="argSecondPageIndex"></param>
        /// <param name="argpageSize"></param>
        /// <param name="argSecondPageSize"></param>
        /// <param name="argtotalCount"></param>
        /// <returns></returns>
        public List<NationalUnion.Domain.Models.ProductModel.Product> GetProductInfo(int argpageIndex, int argSecondPageIndex, int argpageSize, int argSecondPageSize, out int argtotalCount)
        {
            var vProduct = repository.FindAll();
            argtotalCount = vProduct.Count();
            //vProduct = vProduct.OrderBy(x => x.ProID);
            return vProduct.OrderBy(x => x.ProID).Skip((argpageIndex - 1) * argpageSize + (argSecondPageIndex - 1) * argSecondPageSize).Take(argSecondPageSize).ToList<NationalUnion.Domain.Models.ProductModel.Product>();
        }

 

 效果图：

 

 

封装成插件：代码

//注意为了更好的兼容性，开始前有个分号
; (function ($) {//此处将$作为匿名函数的形参
    //begin---WaterFall
    $.fn.WaterFall = function (options) {
        options = options || {};
        options.Container = $(this);//options.Container;//容器,必须
        options.AjaxDataUrl = options.AjaxDataUrl;//获取数据的URL
        options.ItemMarginTop = options.ItemMarginTop || 10;//每元素上边距
        options.ItemMarginLeft = options.ItemMarginLeft || 10;//每元素的左边距
        options.IniteItem = options.IniteItem;
        options.BeginGetData = options.BeginGetData;
        options.Completed = options.Completed;

        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 = [];//保存高度的数组(每一行的底部的位置)

        if (typeof options.IniteItem !== "function") {
            options.IniteItem = false;
        }
        if (typeof options.BeginGetData !== "function") {
            options.BeginGetData = false;
        }
        if (typeof options.Completed !== "function") {
            options.Completed = false;
        }

        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 scrollTop = document.documentElement.scrollTop > document.body.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
            if (scrollTop >= st - document.documentElement.clientHeight) {//加载更多数据
                window.onscroll = null;
                requestIndex++;
                if (options.BeginGetData) {
                    options.BeginGetData();
                }
                $.get(options.AjaxDataUrl + "&requestIndex=" + requestIndex, function (data) {
                    for (var i in data) {
                        var itemObj;
                        if (options.IniteItem) {
                            itemObj = $(options.IniteItem(data[i]));
                        }
                        itemObj.appendTo(options.Container);
                        SetItemPosition(itemObj);
                    }
                    SetContainerHeigh();
                    window.onscroll = ScrollEven;

                    if (options.Completed) {
                        options.Completed();
                    }
                }, "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;
    }

    //$.fn.WaterFall.CreatOneItem = function (singlData) {//定义暴露的函数
    //    return "你必须得写创建单条数据的方法$.fn.WaterFall.CreatOneItem方法;";
    //}
//闭包结束 。
})(jQuery);

调用插件代码

  <script src="~/Scripts/WaterFall.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#ProductList").WaterFall({
                ItemMarginTop: 20,
                ItemMarginLeft: 20,
                AjaxDataUrl: "@Url.Action("GetData", "Product", new { pageIndex = Request.QueryString["pageIndex"] == null ? "1" : Request.QueryString["pageIndex"].ToString() })",
                IniteItem: CretaItem,
                BeginGetData: function () {
                    $("#loading").show();
                },
                Completed: ShowProductPager
            });
        });

        //构造每一条数据
        function CretaItem(data) {
            var html = "";
            html += "<div class=\"Item\">";
            html += "<dl>";
            html += "<dt class=\"ItemImg\">";
            html += "<img class=\"Image260\" src=\"" + data["ProImage"] + "\" />";
            html += "</dt>";
            html += "<dd>";
            html += "<div>" + data["ProID"]+"   " + data["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() {
            $("#loading").hide();
            var loadedCount = parseInt("@Model.PageSize");
            var itemCount = $("#ProductList>div").length;
            if (itemCount >= loadedCount) {
                $("#ProductPager").fadeIn();
                window.onscroll = null;//删除边滚动条的移动事件
            }
        }
    </script>