瀑布流主要就是指数据按照瀑布方式自上而下加载,主要由于高度的不同造成的瀑布落差感(可以参考百度图片)。javascript实现图片瀑布流主要分三个步骤:
1.瀑布容器和图片属性设置(大小、边框、颜色、边距等)
2.图片加载方式
3.图片滚动加载
1.属性设置
html结构:
CSS样式:
1.瀑布容器和图片属性设置(大小、边框、颜色、边距等)
2.图片加载方式
3.图片滚动加载
1.属性设置
html结构:
<body>
<div id="container">
<div class="box">
<div class="box_img">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="box_img">
<img src="img/2.jpg">
</div>
</div>
//根据需要添加N个
......
......
</div>
</body>
CSS样式:
/*图片采用统一宽度和原高度*/
.box_img img{
width: 200px;
height