1-瀑布流布局原理 16:28
一、概念
瀑布流是一种数据展现形式。
瀑布流有一大特点：统一列宽，不统一列高，且数据不是一次性加载进来的，而是分批加载（第n批加载多少条，当满足某一个条件时进行n+1,n+2..批次数据的加载）；
瀑布流的展现形式：固定列和非固定列两种形式，例如：
固定列：
-
实例：蘑菇街-女装
固定列.gif
-
固定列布局特点：
较简单，可以采用浮动布局
ul>li
非固定列：
-
实例：百度图片
非固定列.gif
-
特点：
列数随着可视区屏幕大小的变化而变化，比较常用的是定位布局。
首先定义好列宽，然后再用可视区的宽度除以当前每一列的宽度，得出当前显示出来的最大列数，再根据列数进行定位。
二、固定列瀑布流如何实现
要解决的几个问题：
1）布局是怎么来的
2）了解数据从哪里来？因为数据是按需加载，动态的
第一个问题：布局是怎么来的？
基本布局的确定：
1.pbl.html
<body>
<ul id="ul1">
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/171012_31683kk6i5j4jchjflkd06abf2hf0_640x960.jpg_240x360.v1cAC.70.webp" alt="" />
<p>2017冬装新款斗篷大毛领中长款宽松棉袄外套百搭加厚</p>
</div>
</li>
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/171012_31683kk6i5j4jchjflkd06abf2hf0_640x960.jpg_240x360.v1cAC.70.webp" alt="" />
<p>2017冬装新款斗篷大毛领中长款宽松棉袄外套百搭加厚</p>
</div>
</li>
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/171012_31683kk6i5j4jchjflkd06abf2hf0_640x960.jpg_240x360.v1cAC.70.webp" alt="" />
<p>2017冬装新款斗篷大毛领中长款宽松棉袄外套百搭加厚</p>
</div>
</li>
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/171012_31683kk6i5j4jchjflkd06abf2hf0_640x960.jpg_240x360.v1cAC.70.webp" alt="" />
<p>2017冬装新款斗篷大毛领中长款宽松棉袄外套百搭加厚</p>
</div>
</li>
<li>
<div>
<img src="http://s3.mogucdn.com/mlcdn/c45406/171012_31683kk6i5j4jchjflkd06abf2hf0_640x960.jpg_240x360.v1cAC.70.webp" alt="" />
<p>2017冬装新款斗篷大毛领中长款宽松棉袄外套百搭加厚</p>
</div>
</li>
</ul>
</body>
- 样式：
<style type="text/css">
body {margin: 0;padding:0;}
ul {width: 1080px; margin: 100px auto 0;}
li {width: 247px;float: left;list-style:none;margin-right: 10px;}
li div {border: 1px solid #000;padding:10px; margin-bottom: 10px;}
li div img {width: 225px;display: block;}
</style>
参考效果图：
固定列瀑布流基本布局效果图.gif
删除数据，页面最初是空的
数据不是死的，数据从后端接口请求动态添加到页面中，所以：
1.pbl.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>瀑布流布局</title>
<style type="text/css">
body {margin: 0;padding:0;}
ul {width: 1080px; margin: 10px auto 0;}
li {width: 247px;float: left;list-style:none;margin-right: 10px;}
li div {border: 1px solid #000;padding:10px; margin-bottom: 10px;}
li div img {width: 225px;display: block;}
</style>
</head>
<body>
<ul id="ul1">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
网友评论