一则C#简洁瀑布流代码
View页面。
@{ ViewBag.Title="瀑布流"; Layout="~/Views/Shared/_Layout.cshtml"; } @sectionheader{ <scriptsrc="~/Scripts/jquery-ui-1.8.24.min.js"></script> <styletype="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:thinsolid#333; } #Footer{ margin-top:10px; width:100%; height:40px; } .GreyBlock{ border:thinsolid#333; background-color:#CCC; width:100%; } .Item{ float:left; width:230px; margin:5px; border:1pxsolid#CCC; } </style> } <divid="bodyContent"> <divid="head"> <h1>Head</h1> </div> <div> <!--Left--> <divid="LefMenue"> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </div> <!----right--> <divid="RightContent"> <divid="ProductList"> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> <div> <dl> <dt> <imgsrc="~/Content/Shose.jpg"/></dt> <dd>What'supwithyou</dd> </dl> </div> </div> </div> <div></div> </div> <divid="loading"> <span>加载中,请稍后...</span> </div> <div></div> <divid="Footer"></div> </div>
@sectionscripts{ <scripttype="text/javascript"> varmyContainer=$("#ProductList"); //用户拖动滚动条,达到底部时ajax加载一次数据 varloading=$("#loading").data("on",false);//通过给loading这个div增加属性on,来判断执行一次ajax请求 $(window).scroll(function(){ if($("#loading").data("on"))// { return; } varisButtom=$(document).scrollTop()>($(document).height()-$(window).height()-$("#Footer").height()); if(isButtom){//页面拖到底部了 //加载更多数据 loading.data("on",true).fadeIn(); $.get("@Url.Action("GetData","Product")",function(data){ varhtml=CreateHtml(data); var$newElems=$(html).css({opacity:0}).appendTo(myContainer); $newElems.animate({opacity:1},3000); loading.data("on",false); loading.fadeOut(); },"json"); } }); functionCreateHtml(data){ varhtml=""; if($.isArray(data)){ for(variindata){ //html+="<divclass=\"Item\"style=\"height:"+data[i]+"px\">"; html+="<divclass=\"Item\">"; html+="<dl>"; html+="<dt>"; html+="<imgsrc=\"../Content/Shose.jpg\"/>"; html+="</dt>"; html+="<dd>"; html+="What'supwithyou"+data[i]; html+="</dd>" html+="</dl>" html+="</div>" } } returnhtml; } </script> }