欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一则C#简洁瀑布流代码

程序员文章站 2023-12-18 20:46:16
view页面。 复制代码 代码如下:@{        viewbag.title = "瀑布流";...

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=\"../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#服务端:

复制代码 代码如下:

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

上一篇:

下一篇: