瀑布流实现的思路
2018-12-07 本文已影响0人
cj_jax
准备阶段：
为了方便查阅：源码和静态页面放在了最后面
以下内容均为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
}
]
