案例:https://www.duitang.com/search/?kw=%E5%B8%85%E5%93%A5&type=feed
一个叫堆糖的网址,搜索图片的时候,能够不断的往下浏览!
案例:https://list.mogu.com/search/goods?q=%E8%BF%9E%E8%A1%A3%E8%A3%99&acm=3.mce.1_10_13u0k2.39084.108675.lSznUswUSj2nz.mid_39084-sd_115-mdt_sketch-pm_998-dit_-lc_201&from=searchplacehold&ptp=31.v5mL0b.0.0.yWjN8CKG
这个是女装的网站!往下拉也是,但是他是等宽等高!所以不典型!!!!
外边有一个大盒子,里面有很多个小盒子!宽度都是一样的小盒子,但是高度不一样!参差摆放的,可以用瀑布流!
布局:父盒子,子盒子;子盒子相对于父盒子做定位!第二行的第一个盒子放在第一行最矮的那个盒子后面!以此类推!盒子中最后一张图出现一半,再进行渲染加载!
1.基础页面
<div id="main">
<div class="box">
<div class="pic"><img src="images/color02.jpeg" alt=""></div>
</div>
<!--这里面有很多box和pic,可以复制很多!这里略过!-!>
<div class="box">
<div class="pic"><img src="images/color03.jpg" alt=""></div>
</div>
</div>
2.样式文件
<link rel="stylesheet" href="css/index.css">
*{
margin: 0;
padding: 0;
border: none;
}
img{
vertical-align: top; /*顶部对齐*/
}
#main{
position: relative;/*方便后面定位*/
}
.box{
float: left;
padding: 15px 0 0 15px