美文网首页
瀑布流实现的思路

瀑布流实现的思路

作者: cj_jax | 来源:发表于2018-12-07 17:34 被阅读0次

    准备阶段：

    为了方便查阅：源码和静态页面放在了最后面

    以下内容均为js代码，静态页面不动

    1.渲染第一行

        <script>
    //  1.获取元素
    var $box = $('.box');
    var $btn = $('.btn');
    var $items= $box.children();
    console.log($items);
    
    // 2.获取对应的父盒子的宽度，每一个盒子的宽度，计算间隔
    var boxWidth = $box.width();
    var itemWidth = $items.width();
    // 间隔 = （父盒子的宽- 5*每个items的宽度）/4；
    var glad = (boxWidth - itemWidth*5)/4;

    console.log(glad,itemWidth,boxWidth);
    
        var arr = [0,0,0,0,0];
        // 3.1遍历items  使用each遍历数组
        $items.each(function (index,ele) {
            
        // 3.2过程判断是不是前五个
        if(index < 5){

        // 3.3如果是前五个设置top和left
            $(ele).css({
                top : 0,
                left : index*(itemWidth+glad)
            });
        // 3.4把每一列的高度，赋值给arr数组
            arr[index] = $(ele).height();
        }
        });
    </script>

    2.其他行渲染

        <script>
    //  1.获取元素
    var $box = $('.box');
    var $btn = $('.btn');
    var $items= $box.children();
    console.log($items);
    
    
    // 2.获取对应的父盒子的宽度，每一个盒子的宽度，计算间隔
    var boxWidth = $box.width();
    var itemWidth = $items.width();
    // 间隔 = （父盒子的宽- 5*每个items的宽度）/4；
    var glad = (boxWidth - itemWidth*5)/4;

    console.log(glad,itemWidth,boxWidth);
    
        var arr = [0,0,0,0,0];
        // 3.1遍历items  使用each遍历数组
        $items.each(function (index,ele) {
            
        // 3.2过程判断是不是前五个
        if(index < 5){

        // 3.3如果是前五个设置top和left
            $(ele).css({
                top : 0,
                left : index*(itemWidth+glad)
            });
        // 3.4把每一列的高度，赋值给arr数组
            arr[index] = $(ele).height();
        }else{

    //   .渲染其他的盒子
        
        // 1.需要一个数组，用于存放每一列的高度
        
        // 2.第一行渲染的时候，应该把每一列的高度，存储到数组中
        
        // 3.先从数组中找到最小的高度以及对应的下标
    var min = arr[0];
    var minIndex = 0;

    for(var i = 0 ;i < arr.length;i++){
      if(min > arr[i]){
        min = arr[i];
        minIndex = i ;
      }
    }

        // 4.给当前的盒子设置left和top
    $(ele).css({
      top : min+glad,
      left : minIndex*(itemWidth+glad)
    });

    console.log(minIndex,min);
        // 5.重新修改对应的列的高度的值
    arr[minIndex] = min+$(ele).height()+glad;
    }

  //   给父盒子设置高度
     
  //  5.1找到数组的最大值，赋值给父盒子的高度
    var max = Math.max.apply(null,arr);
   
  //  5.2Math.max(传参数列表)，返回最大值
  //  5.3借用Math.max,求arr中的最大值
    $('.box').height(max);
        });
    </script>

    3.简化js代码

        <script>
    //  1.获取元素
    var $box = $('.box');
    var $btn = $('.btn');
    var $items= $box.children();
    console.log($items);
    
    
    // 2.获取对应的父盒子的宽度，每一个盒子的宽度，计算间隔
    var boxWidth = $box.width();
    var itemWidth = $items.width();
    // 间隔 = （父盒子的宽- 5*每个items的宽度）/4；
    var glad = (boxWidth - itemWidth*5)/4;

    console.log(glad,itemWidth,boxWidth);
    
        var arr = [0,0,0,0,0];
        // 3.1遍历items  使用each遍历数组
        $items.each(function (index,ele) {
            
    //   .渲染其他的盒子
        
        // 1.需要一个数组，用于存放每一列的高度
        
        // 2.第一行渲染的时候，应该把每一列的高度，存储到数组中
        
        // 3.先从数组中找到最小的高度以及对应的下标
    var min = arr[0];
    var minIndex = 0;

    for(var i = 0 ;i < arr.length;i++){
      if(min > arr[i]){
        min = arr[i];
        minIndex = i ;
      }
    }

        // 4.给当前的盒子设置left和top
    $(ele).css({
      top : min+glad,
      left : minIndex*(itemWidth+glad)
    });

    console.log(minIndex,min);
    
        // 5.重新修改对应的列的高度的值
    arr[minIndex] = min+$(ele).height()+glad;

  //   给父盒子设置高度
     
  //  5.1找到数组的最大值，赋值给父盒子的高度
    var max = Math.max.apply(null,arr);
   
  //  5.2Math.max(传参数列表)，返回最大值
  //  5.3借用Math.max,求arr中的最大值
    $('.box').height(max);
        });
    </script>

    4.异步发送请求

      <script>
    //   点击按钮，获取数据，根据数据去渲染item
    // 1.获取元素，注册事件
    // 2.给服务器发请求，获取数据

    // 3.数据成功接收到之后，利用模板引擎拼接字符串，渲染到页面上（未实现瀑布流）
    var btn = $('.btn');
    var page = 1;
    btn.click(function () {

      $.ajax({

        url: 'data.php',
        type: 'get',
        data: {
          page: page,
          pageSize: 10
        },
        dataType: 'json',

        success: function (res) {

          console.log(res);

          var htmlStr = template('tmp', res);

          $('.box').append(htmlStr);

          rend();
        }
      });
    });

    function rend() {
      //    1.获取元素
      var $box = $('.box');
      var $btn = $('.btn');
      var $items = $box.children();
      console.log($items);


      // 2.获取对应的父盒子的宽度，每一个盒子的宽度，计算间隔
      var boxWidth = $box.width();
      var itemWidth = $items.width();
      // 间隔 = （父盒子的宽- 5*每个items的宽度）/4；
      var glad = (boxWidth - itemWidth * 5) / 4;

      console.log(glad, itemWidth, boxWidth);

      var arr = [0, 0, 0, 0, 0];
      // 3.1遍历items  使用each遍历数组
      $items.each(function (index, ele) {

        //   .渲染其他的盒子

        // 1.需要一个数组，用于存放每一列的高度

        // 2.第一行渲染的时候，应该把每一列的高度，存储到数组中

        // 3.先从数组中找到最小的高度以及对应的下标
        var min = arr[0];
        var minIndex = 0;

        for (var i = 0; i < arr.length; i++) {
          if (min > arr[i]) {
            min = arr[i];
            minIndex = i;
          }
        }

        // 4.给当前的盒子设置left和top
        $(ele).css({
          top: min + glad,
          left: minIndex * (itemWidth + glad)
        });

        console.log(minIndex, min);

        // 5.重新修改对应的列的高度的值
        arr[minIndex] = min + $(ele).height() + glad;

        //   给父盒子设置高度

        //  5.1找到数组的最大值，赋值给父盒子的高度
        var max = Math.max.apply(null, arr);

        //  5.2Math.max(传参数列表)，返回最大值
        //  5.3借用Math.max,求arr中的最大值
        $('.box').height(max);
      });
    }
  </script>

    5.滚动加载数据

      <script>
    //   点击按钮，获取数据，根据数据去渲染item

    // 1.获取元素，注册事件
    // 2.给服务器发请求，获取数据

    // 3.数据成功接收到之后，利用模板引擎拼接字符串，渲染到页面上（未实现瀑布流）
    var btn = $('.btn');
    var page = 1;
    btn.click(function () {

      $.ajax({

        url: 'data.php',
        type: 'get',
        data: {
          page: page,
          pageSize: 10
        },
        dataType: 'json',

        success: function (res) {

          console.log(res);

          var htmlStr = template('tmp', res);

          $('.box').append(htmlStr);

          rend();
        }
      });

    });

    function rend() {
      //    1.获取元素
      var $box = $('.box');
      var $btn = $('.btn');
      var $items = $box.children();
      console.log($items);

      // 2.获取对应的父盒子的宽度，每一个盒子的宽度，计算间隔
      var boxWidth = $box.width();
      var itemWidth = $items.width();
      // 间隔 = （父盒子的宽- 5*每个items的宽度）/4；
      var glad = (boxWidth - itemWidth * 5) / 4;

      console.log(glad, itemWidth, boxWidth);

      var arr = [0, 0, 0, 0, 0];
      // 3.1遍历items  使用each遍历数组
      $items.each(function (index, ele) {

        //   .渲染其他的盒子

        // 1.需要一个数组，用于存放每一列的高度

        // 2.第一行渲染的时候，应该把每一列的高度，存储到数组中

        // 3.先从数组中找到最小的高度以及对应的下标
        var min = arr[0];
        var minIndex = 0;

        for (var i = 0; i < arr.length; i++) {
          if (min > arr[i]) {
            min = arr[i];
            minIndex = i;
          }
        }

        // 4.给当前的盒子设置left和top
        $(ele).css({
          top: min + glad,
          left: minIndex * (itemWidth + glad)
        });

        console.log(minIndex, min);

        // 5.重新修改对应的列的高度的值
        arr[minIndex] = min + $(ele).height() + glad;

        //   给父盒子设置高度

        //  5.1找到数组的最大值，赋值给父盒子的高度
        var max = Math.max.apply(null, arr);

        //  5.2Math.max(传参数列表)，返回最大值
        //  5.3借用Math.max,求arr中的最大值
        $('.box').height(max);
      });

    }
  </script>

    页面

    html：图片可以自己替换

    静态页面

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>封装jquery插件瀑布流</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: "Microsoft Yahei";
        }

        .box {
            position: relative;
            width: 1200px;
            margin: 0 auto;
        }

        .item {
            width: 232px;
            position: absolute;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }

        .item>img {
            width: 100%;
            display: block;
        }

        .item>p {
            margin: 0;
            padding: 10px;
            background: #eee;
        }

        .btn {
            width: 280px;
            height: 40px;
            margin: 30px auto;
            text-align: center;
            line-height: 40px;
            background-color: #CCC;
            border-radius: 6px;
            font-size: 24px;
            cursor: pointer;
        }

        .loading {
            background-color: transparent;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item ">
            <img src="./images/1.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/2.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/3.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/4.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/3.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/4.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/3.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/4.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/3.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/4.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/3.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/4.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/6.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/6.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/6.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/5.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/6.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/7.jpg" alt="">
            <p>花非花云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/8.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
        <div class="item">
            <img src="./images/9.jpg" alt="">
            <p>花非花，雾非雾，夜半来，天明去，来如春梦不多时，去似朝云无觅处。花非花，雾非雾，夜半来，天明去，，夜半来，天明去，，夜半来，天明去，来如春梦不多时，去似朝云无觅处。</p>
        </div>
    </div>

    <div class="btn">加载更多</div>


</body>


</html>

    css：直接使用 写在了html里了

    js：引入即可

    封装成了jquery的插件

    // 瀑布流具体实现
// 1. 获取父盒子和子盒子, 获取父盒子和子盒子的宽度
// 2. 计算间隙
// 3. 遍历子盒子, 进行设置位置 left, top
//    (1) 第一行
//    (2) 第一行以外的盒子

// jQuery 插件实现
// 给 jQuery 原型添加了一个方法
$.fn.waterFall = function() {
  // this 就是一个 jQuery 对象
  var $box = this; // 父盒子
  var $items = $box.children(); // 所有子盒子
  var boxWidth = $box.width(); // 父盒子的宽度
  var itemWidth = $items.width(); // 获取子盒子的宽度, 返回第一个盒子的宽度
  // 设定 5 列
  var columns = 5;
  // 计算间隙 = (父盒子的宽度 - 子盒子的宽度 * 列数) / (列数 - 1)
  var space = (boxWidth - itemWidth * columns) / (columns - 1);
  // 准备一个数组, 专门用于存放每一列的高度
  var arr = [ 0, 0, 0, 0, 0 ];
  // 遍历子盒子, 设置 left 和 top
  $items.each(function( index, element ) { 
    // 遍历数组, 求最小列和最小列索引
    var min = arr[0];
    var minIndex = 0;
    for ( var i = 0; i < arr.length; i++ ) {
      if ( min > arr[i] ) {
        min = arr[i];  // 更新最小列
        minIndex = i; // 更新索引
      }
    }
    // 设置盒子的位置, 设置 left 和 top
    $(this).css({
      left: minIndex * ( itemWidth + space ),
      top: min + space
    });
    // 设置完盒子的位置后, 需要更新最小列
    arr[ minIndex ] = min + space + $(this).height();
  });
  // 给父盒子设置高度, 求数组最大值
  var maxHeight = Math.max.apply( null, arr );
  $box.height( maxHeight ); 
}

    jquery-1.12.4.js 自行查找 使用juery 用于简化获取元素，以及后面给封装对象到jquery的原型上

    template-web.js 自行查找 模板引擎 用于渲染数据

    注意！！！注意！！！注意！！！

    data.json文件和data.php这两个文件和jquery.waterfall.js和静态页面在同一级目录下

    接口：

    接口说明：瀑布流分页数据

接口地址：data.php

请求方式：get

接口参数：page 当前是第几页    pageSize 当前页需要显示多少条

返回类型  json

返回数据： {
            page: 2,
            items: [
              {path: "./images/1.jpg",text:'', height: 280, width: 232},
              {path: "./images/2.jpg",text:'', height: 164, width: 232},
              ...
            ]
          }

          page   下一页的页码
          items  返回当前页的数据
              path 图片地址
              text 文字
              height 图片高度
              width 图片宽度

    data.php文件：

    <?php

    header('Content-Type:application/json; charset=utf-8');

    /*获取数据  字符串*/
    $data = file_get_contents('data.json');

    /*转化php对象？ 需要对其操作*/
    $data = json_decode($data);

    /*页码*/
    $page = $_GET['page'];
    /*条数*/
    $pageSize = $_GET['pageSize'];

    /*获取数据的起始索引*/
    $offset = ($page - 1) * $pageSize;

    /*slice 从什么位子开始切割 切割多少条*/
    $result = array_slice($data, $offset, $pageSize);

    /*下一也的页码*/
    $page++;

    /*转化json字符串 输出到前台*/
    echo json_encode(array('page'=>$page, 'items'=>$result));/*｛items:[]｝*/

    sleep(1);

?>

    data.json

    [
  {
    "path": "./images/1.jpg",
    "text": "一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 280
  },
  {
    "path": "./images/2.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 164
  },
  {
    "path": "./images/3.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 360
  },
  {
    "path": "./images/4.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 344
  },
  {
    "path": "./images/5.jpg",
    "text": "青春，青春，一场盛世不平一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 174
  },
  {
    "path": "./images/6.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/7.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 164
  },
  {
    "path": "./images/8.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 140
  },
  {
    "path": "./images/9.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/10.jpg",
    "text": "青春，青春，一场盛世不平凡花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 183
  },
  {
    "path": "./images/11.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/12.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 182
  },
  {
    "path": "./images/13.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 152
  },
  {
    "path": "./images/14.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/15.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 306
  },
  {
    "path": "./images/16.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/17.jpg",
    "text": "青春，青春，一场盛世不平凡。一时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 244
  },
  {
    "path": "./images/18.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 155
  },
  {
    "path": "./images/19.jpg",
    "text": "青春，青春，一场盛世不花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/20.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 248
  },
  {
    "path": "./images/21.jpg",
    "text": "青春，青春，一场一杯花茶，一段时光一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 348
  },
  {
    "path": "./images/22.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/23.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 197
  },
  {
    "path": "./images/24.jpg",
    "text": "青春，青春，一场盛一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 173
  },
  {
    "path": "./images/25.jpg",
    "text": "青春，青春，一场盛一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 174
  },
  {
    "path": "./images/26.jpg",
    "text": "青春，青春，一场盛世，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 231
  },
  {
    "path": "./images/27.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 309
  },
  {
    "path": "./images/28.jpg",
    "text": "一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 386
  },
  {
    "path": "./images/29.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/30.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/1.jpg",
    "text": "一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 280
  },
  {
    "path": "./images/2.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 164
  },
  {
    "path": "./images/3.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 360
  },
  {
    "path": "./images/4.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 344
  },
  {
    "path": "./images/5.jpg",
    "text": "青春，青春，一场盛世不平一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 174
  },
  {
    "path": "./images/6.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/7.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 164
  },
  {
    "path": "./images/8.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 140
  },
  {
    "path": "./images/9.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/10.jpg",
    "text": "青春，青春，一场盛世不平凡花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 183
  },
  {
    "path": "./images/11.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/12.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 182
  },
  {
    "path": "./images/13.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 152
  },
  {
    "path": "./images/14.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/15.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 306
  },
  {
    "path": "./images/16.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/17.jpg",
    "text": "青春，青春，一场盛世不平凡。一时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 244
  },
  {
    "path": "./images/18.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 155
  },
  {
    "path": "./images/19.jpg",
    "text": "青春，青春，一场盛世不花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 154
  },
  {
    "path": "./images/20.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 248
  },
  {
    "path": "./images/21.jpg",
    "text": "青春，青春，一场一杯花茶，一段时光一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 348
  },
  {
    "path": "./images/22.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/23.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 197
  },
  {
    "path": "./images/24.jpg",
    "text": "青春，青春，一场盛一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 173
  },
  {
    "path": "./images/25.jpg",
    "text": "青春，青春，一场盛一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 174
  },
  {
    "path": "./images/26.jpg",
    "text": "青春，青春，一场盛世，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 231
  },
  {
    "path": "./images/27.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 309
  },
  {
    "path": "./images/28.jpg",
    "text": "一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 386
  },
  {
    "path": "./images/29.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/30.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/1.jpg",
    "text": "一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 280
  },
  {
    "path": "./images/2.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 164
  },
  {
    "path": "./images/3.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 360
  },
  {
    "path": "./images/4.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 344
  },
  {
    "path": "./images/5.jpg",
    "text": "青春，青春，一场盛世不平一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 174
  },
  {
    "path": "./images/6.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  },
  {
    "path": "./images/7.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 164
  },
  {
    "path": "./images/8.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 140
  },
  {
    "path": "./images/9.jpg",
    "text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！",
    "width": 232,
    "height": 232
  }
]

    相关文章

      网友评论

          本文标题：瀑布流实现的思路

          本文链接：https://www.haomeiwen.com/subject/tchxhqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|瀑布流实现的思路|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！