CSS:
.main
{
width:
100%
margin-top:
100px
text-align:
center
font-size:
12.5px
}
th,
td
{
border:
1px
solid
#ccc
line-height:
40px
padding-left:
5px
}
.item:hover
{
background-color:
#efefef
}
.item:nth-child(2n)
{
background-color:
#efefef
}
.ListView
{
width:
600px
overflow:
hidden
margin:
0
auto
padding:
10px
height:372px
border:
1px
solid
#dddddd
}
.ListView
.c
{
width:
1200px
margin:
0
auto
border-collapse:
collapse
}
.Item
{
border-bottom:
1px
dashed
#dddddd
padding:
10px
0
10px
0
overflow:
hidden
margin-left:600px
}
.Item
span
{
float:
left
text-align:
left
}
.Item
span:first-child
{
color:
#6AA8E8
}
.Item
span:last-child
{
text-align:
center
}
HTML
<div
class="main">
<div
class="ListView">
<div
class="c">
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
<div
class="Item">
<span>test</span>
<span>男/0</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>
</div>
</div>
</div>
<p
style="text-align:center"><a
href="javascript:void(0)"
onClick="ListView.Update()">刷新数据</a></p>
JS
<script
type="text/javascript"
src="/js/jquery-1.8.0.min.js"></script>
<script
type="text/javascript">
$(function(){
ListView.Init()
})
var
ListView={
Init:function(){
$(".Item
span").css("width",$(".ListView").width()/4+"px")
for(var
i=0i<$(".Item").lengthi++){
var
target=$(".Item")[i]
$(target).animate({marginLeft:"0px"},300+i*100)
}
},
Update:function(){
$(".ListView
.c
.Item").remove()
for(var
i=0i<10i++){
var
newItem=$("<div
class=\"Item\">
<span>test</span>
<span>男/"+i+"</span>
<span>四川省，成都市，锦江区</span>
<span>详细说明</span>
</div>")
$(newItem).find("span").css("width",$(".ListView").width()/4+"px")
$(".ListView
.c").append(newItem)
$(newItem).animate({marginLeft:"0px"},300+i*100)
}
}
}
</script>
附上演示效果
http://demo.jb51.net/js/2015/jquery-dtlb
效果是不是非常棒呢，接下来我们再来看看瀑布流的实现思路和js控制动态加载的代码
下面的代码主要是控制滚动条下拉时的加载事件的
在下面代码说明出，写上你的操作即可，无论是加载图片还是加载记录数据
都可以
别忘了引用jquery类库
$(window).scroll(function
()
{
var
scrollTop
=
$(this).scrollTop()
var
scrollHeight
=
$(document).height()
var
windowHeight
=
$(this).height()
if
(scrollTop
+
windowHeight
==
scrollHeight)
{
//此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
//var
page
=
Number($("#redgiftNextPage").attr('currentpage'))
+
1
//redgiftList(page)
//$("#redgiftNextPage").attr('currentpage',
page
+
1)
}
})
解析：
判断滚动条到底部，需要用到DOM的三个属性值，即scrollTop、clientHeight、scrollHeight。
scrollTop为滚动条在Y轴上的滚动距离。
clientHeight为内容可视区域的高度。
scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
从这个三个属性的介绍就可以看出来，滚动条到底部的条件即为scrollTop
+
clientHeight
==
scrollHeight。（兼容不同的浏览器）。
JS特效就是网页中实现的特殊效果或者特殊的功能的一种技术,是用网页脚本(javascript)来编写制作动态特殊效果。
比如图片切换，渐变等等，它为网页活跃了网页的气氛，有时候会起到一定的亲切力。
JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript 标准。
扩展资料：
能够具有交互性，能够包含更多活跃的元素，就有必要在网页中嵌入其它的技术。如：Javascript、VBScript、Document Object Model（DOM，文档对象模型）、Layers和 Cascading Style Sheets（CSS，层叠样式表）。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化，减少下载时间。JavaScript 能及时响应用户的操作，对提交表单做即时的检查，无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的，只要你有创意。
<tr><td align="center" class="tableHeader3-wn">所属类别</td>
<td class="tableHeader3-wn" align="left">
<table>
<tr>
<td>
<select id="srcList" name="srcList" multiple="multiple" size="12" ondblclick="addSort()">
<option value="1">VALUE1</option>
<option value="2">VALUE2</option>
<option value="3">VALUE3</option>
<option value="4">VALUE4</option>
</select>
</td>
<td>
<a href="#" onclick="addSort()" style="height:20pxborder: 1px solid #99BBE8margin:autopadding:0pxtext-align:center
width:30pxdisplay:blockbackground-image:url(${ctx}/images/button.gif)
text-decoration:nonefont-size:14pxcolor:#282523padding-top:4px">添加</a>
<a href="#" onclick="deleteSort()" style="height:20pxborder: 1px solid #99BBE8margin:autopadding:0pxtext-align:center
width:30pxdisplay:blockbackground-image:url(${ctx}/images/button.gif)
text-decoration:nonefont-size:14pxcolor:#282523padding-top:4px">移除</a>
</td>
<td>
<select id="destList" name="destList" multiple="multiple" size="12" ondblclick="deleteSort()">
</select>
</td>
</tr>
</table>
</td>
</tr>
<script
type="text/javascript">
function addSort(){
var src = document.getElementById('srcList')
var dest = document.getElementById('destList')
for (var i = 0i <src.options.lengthi++)
{
if (src.options[i].selected)
{
var exist = false
for (var j = 0j <dest.options.lengthj++)
{
if (dest.options[j].value == src.options[i].value)
{
exist = true
break
}
}
if (!exist)
{
var opt = document.createElement('OPTION')
opt.value = src.options[i].value
opt.text = src.options[i].text
dest.options.add(opt)
}
}
}
}
/** 删除分类 */
function deleteSort(){
var dest = document.getElementById('destList')
for (var i = dest.options.length - 1i >= 0 i--)
{
if (dest.options[i].selected)
{
dest.options[i] = null
}
}
}
</script>
