2.1-瀑布流布局原理

2017-11-13 本文已影响58人小豌豆书吧

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>