首页 > 代码库 > 瀑布流代码，简洁版

瀑布流代码，简洁版

2024-07-07 20:31:07   221人阅读

最近想实现数据的延迟加载，网上找一下有很的列子，看了Masonry的例子启发，自己写了一个很简单的例子(仅限于每列的宽固定高一致，并不算是真正意义的瀑布流)。

View页面。

@{
        ViewBag.Title = "瀑布流";
        Layout = "~/Views/Shared/_Layout.cshtml";
    }
@section header{
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
         <style type="text/css">
        .* {
         margin:0px;
         padding:0px;
        }
        body {
            margin-left:auto;
            margin-right:auto;
        }
        .ClearBoth {
            clear:both;
        }
        #bodyContent {
            width:1400px;
            margin-left:auto;
            margin-right:auto;
        }
        #head {
            width:100%;
            height:50px;
            margin-bottom:10px;
        }
        #LefMenue {
            width:20%;
            height:500px;
            float:left;
        }
        #RightContent {
            width:75%;
            float:right;
            border: thin solid #333;
        }
        #Footer {
            margin-top:10px;
            width:100%;
            height:40px;
        }
        .GreyBlock {
            border: thin solid #333;
            background-color:#CCC;
            width:100%;
        }
        .Item {
            float: left;
            width: 230px;
            margin:5px;
            border: 1px solid #CCC;
        }
        </style>
}


 <div id="bodyContent">
   <div id="head" class="GreyBlock">
     <h1>Head</h1>
   </div>
   
   <div>
           <!--Left-->
       <div id="LefMenue" class="GreyBlock">
         <ul>
           <li>1</li>
           <li>2</li>
           <li>3</li>
         </ul>
       </div>
       <!----right-->
       <div id="RightContent">
             <div id="ProductList">
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>

               </div>

               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>

               </div>

               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>

               </div>

               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>

               </div>

               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>

               </div>
                 
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>
               </div>
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>
               </div>
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>
               </div>
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>
               </div>
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>
               </div>
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>
               </div>
               <div class="Item">
                   <dl>
                       <dt>
                           <img src="~/Content/Shose.jpg" /></dt>
                       <dd>What‘s up with you</dd>
                    </dl>
               </div>

             </div>
       </div>
     <div class="ClearBoth"></div>
   </div>
   
<div id="loading" class="loading-wrap">
    <span class="loading">加载中，请稍后...</span>
</div>
   <div class="ClearBoth"></div>
   <div id="Footer" class="GreyBlock"></div>
 </div>





@section scripts{
    <script type="text/javascript">
        var myContainer = $("#ProductList");

        //用户拖动滚动条，达到底部时ajax加载一次数据
        var loading = $("#loading").data("on", false);//通过给loading这个div增加属性on，来判断执行一次ajax请求

        $(window).scroll(function () {
            if ($("#loading").data("on"))//
            {
                return;
            }

            var isButtom = $(document).scrollTop() > ($(document).height() - $(window).height() - $("#Footer").height());
            if (isButtom) {//页面拖到底部了
                //加载更多数据
                loading.data("on",true).fadeIn();

                $.get("@Url.Action("GetData","Product")", function (data) {
                    var html = CreateHtml(data);
                    var $newElems = $(html).css({ opacity: 0 }).appendTo(myContainer);
                    $newElems.animate({ opacity: 1 },3000);
                    loading.data("on", false);
                    loading.fadeOut();

                },"json");
            }
        });


        function CreateHtml(data) {
            var html = "";
            if ($.isArray(data)) {
                for (var i in data) {
                    //html += "<div class=\"Item\" style=\"height:"+data[i]+"px\">";
                    html += "<div class=\"Item\">";
                    html += "<dl>";
                    html += "<dt>";
                    html += "<img src=http://www.mamicode.com/"../Content/Shose.jpg\" />";
                    html += "</dt>";
                    html += "<dd>";
                    html += "What‘s up with you " + data[i];
                    html += "</dd>"
                    html += "</dl>"
                    html += "</div>"
                }
            }
            return html;
        }
    </script>
    }
View Code

 

C#服务端：

        public JsonResult GetData()
        {
            Random ro = new Random();

            List<int> vListInt = new List<int>();
            for (int i = 0; i < 12; i++)
            {
                vListInt.Add(ro.Next(400, 500));
            }
            return Json(vListInt, JsonRequestBehavior.AllowGet);
        }
View Code

 

 如果每块的高度不一致，可参考这位朋友的思路

http://www.cnblogs.com/xueming/archive/2013/02/19/flow.html


联系
我们