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