欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

一則C#簡(jiǎn)潔瀑布流代碼

 更新時(shí)間：2014年06月11日 10:49:36   作者：  
最近想實(shí)現(xiàn)數(shù)據(jù)的延遲加載，網(wǎng)上找一下有很多例子，看了Masonry的例子啟發(fā)，自己寫了一個(gè)很簡(jiǎn)潔的代碼。分享給大家

View頁(yè)面。

復(fù)制代碼 代碼如下:

@{
        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">加載中，請(qǐng)稍后...</span>
</div>
   <div class="ClearBoth"></div>
   <div id="Footer" class="GreyBlock"></div>
 </div>

@section scripts{
    <script type="text/javascript">
        var myContainer = $("#ProductList");
        //用戶拖動(dòng)滾動(dòng)條，達(dá)到底部時(shí)ajax加載一次數(shù)據(jù)
        var loading = $("#loading").data("on", false);//通過(guò)給loading這個(gè)div增加屬性on，來(lái)判斷執(zhí)行一次ajax請(qǐng)求
        $(window).scroll(function () {
            if ($("#loading").data("on"))//
            {
                return;
            }
            var isButtom = $(document).scrollTop() > ($(document).height() - $(window).height() - $("#Footer").height());
            if (isButtom) {//頁(yè)面拖到底部了
                //加載更多數(shù)據(jù)
                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=\"../Content/Shose.jpg\" />";
                    html += "</dt>";
                    html += "<dd>";
                    html += "What's up with you " + data[i];
                    html += "</dd>"
                    html += "</dl>"
                    html += "</div>"
                }
            }
            return html;
        }
    </script>
    }

C#服務(wù)端：

復(fù)制代碼 代碼如下:

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

相關(guān)文章

  • C#實(shí)現(xiàn)日歷效果

    C#實(shí)現(xiàn)日歷效果

    這篇文章主要為大家詳細(xì)介紹了C#實(shí)現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2022-06-06
  • C#創(chuàng)建SQLite控制臺(tái)應(yīng)用程序詳解

    C#創(chuàng)建SQLite控制臺(tái)應(yīng)用程序詳解

    這篇文章主要為大家詳細(xì)介紹了C#創(chuàng)建SQLite控制臺(tái)應(yīng)用程序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2017-07-07
  • C# DialogResult用法案例詳解

    C# DialogResult用法案例詳解

    這篇文章主要介紹了C# DialogResult用法案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-08-08
  • mvc開啟gzip壓縮示例分享

    mvc開啟gzip壓縮示例分享

    這篇文章主要介紹了mvc開啟gzip壓縮示例,需要的朋友可以參考下
    2014-03-03
  • C#基礎(chǔ)語(yǔ)法：方法參數(shù)詳解

    C#基礎(chǔ)語(yǔ)法：方法參數(shù)詳解

    這篇文章主要介紹了C#基礎(chǔ)語(yǔ)法：方法參數(shù)詳解,本文講解了值參數(shù)、引用參數(shù)、輸出參數(shù)、參數(shù)數(shù)組等參數(shù)類型,并分別給出代碼實(shí)例,需要的朋友可以參考下
    2015-06-06
  • c#讀取excel數(shù)據(jù)的兩種方法實(shí)現(xiàn)

    c#讀取excel數(shù)據(jù)的兩種方法實(shí)現(xiàn)

    這篇文章主要介紹了c#讀取excel數(shù)據(jù)的兩種方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-12-12
  • C#中IList<T>與List<T>的區(qū)別深入解析

    C#中IList<T>與List<T>的區(qū)別深入解析

    本篇文章主要是對(duì)C#中IList<T>與List<T>的區(qū)別進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
    2014-01-01
  • c# delegate和event的使用說(shuō)明

    c# delegate和event的使用說(shuō)明

    這篇文章主要介紹了c# delegate和event的使用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2021-04-04
  • C#的編碼規(guī)范詳細(xì)說(shuō)明

    C#的編碼規(guī)范詳細(xì)說(shuō)明

    編碼規(guī)范是老生常談的問(wèn)題，現(xiàn)在再看代碼規(guī)范可能不會(huì)再去在意變量，控件的命名方法等，而是更加關(guān)注代碼的實(shí)用性
    2013-08-08
  • c#之滾動(dòng)字幕動(dòng)畫窗體的實(shí)現(xiàn)詳解

    c#之滾動(dòng)字幕動(dòng)畫窗體的實(shí)現(xiàn)詳解

    本篇文章是對(duì)c#中滾動(dòng)字幕動(dòng)畫窗體的實(shí)現(xiàn)方法進(jìn)行了詳細(xì)的分析介紹，需要的朋友參考下
    2013-06-06

最新評(píng)論