瀑布流
-----------------------------------HTML页面：----------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Plugin</title>
<style>
body {margin: 0;padding: 0;font-family: "Microsoft Yahei";background: #f5f5f5;}
.container{width: 1200px;margin: 0 auto;padding-top:40px}
.container > .items{position: relative;}
.container > .items > .item{width: 232px;position: absolute;box-shadow: 0 1px 3px rgba(0,0,0,0.3);}
.container > .items > .item > img{width: 100%;display: block;height: 250px}
.container > .items > .item:nth-child(4n) > img{width: 100%;display: block;height: 450px}
.container > .items > .item > p{margin: 0;padding:10px;background: #fff;}
.container > .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;
}
.container > .loading{
background-color: transparent;
}
</style>
</head>
<body>
<div class="container">
<div class="items">
<!--TODO 需要渲染数据的地方-->
</div>
<div class="btn">正在加载中...</div>
</div>
<!--
{{each items as item index}}
{{/each}}
-->
<script type="text/template" id="template">
{{each items}}
<div class="item">
<img src="{{$value.path}}" alt="{{$index}}">
<p>{{$value.text}}</p>
</div>
{{/each}}
</script>
<script src="js/jquery.min.js"></script>
<script src="js/template.js"></script>
<script src="js/jquery.waterfall.js"></script>
<script>
/*
* 1.首屏加载一次数据 渲染第一页的数据
* 2.变成瀑布流的布局方式
* 3.当我们点击加载更多的时候 去请求接口获取数据 把数据渲染成html （下一页）
* 4.防止重复提交
* 5.没有数据的时候 可以提示 没有数据可以加载 不能发请求
* */
$(function(){
/*获取瀑布流容器*/
var $container = $('.items');
var $btn = $('.btn');
//console.log($btn.data('page'));
var renderHtml = function(){
/*拉取数据*/
$.ajax({
type:'get',
url:'data.php',
data:{
page:$btn.data('page') || 1 ,/*取页面 如果没取到默认的是第一页*/
pageSize:10
},
dataType:'json',
beforeSend:function(){
$btn.addClass('loading').html('正在加载中...');
},
success:function(data){
/*处理数据*/
/*设置下一页的页码*/
$btn.data('page',data.page);
//console.log($btn.data('page'));
/*渲染页面*/
/*1.写模版*/
/*2.转化成html结构*/
var html = template('template',data);
//console.log(html);
/*3.页面渲染*/
$container.append(html);
/*4.瀑布流布局*/
$container.WaterFall();
//console.log(data);
if(data && data.items && data.items.length){
$btn.removeClass('loading').html('加载更多');
}else{
$btn.addClass('loading').html('没有更多数据了...');
}
}
});
};
renderHtml();
/** 3.当我们点击加载更多的时候 去请求接口获取数据 把数据渲染成html （下一页）
* 4.防止重复提交*/
$btn.on('click',function(){
if($btn.hasClass('loading'))return false;
renderHtml();
});
/*滚动加载*/
$(window).on('scroll', function () {
var offsetTop = $('.items').offset().top;/*容器距离顶部的高度*/
var height = $('.items').height();/*容器的高度*/
var scrollTop = $(this).scrollTop();/*文档距离顶部的高度*/
var winHeight = $(this).height();/*窗口的高度*/
var offset = offsetTop + height - scrollTop - winHeight;
if(offset <= 200 && !$('.btn').hasClass('loading')) {
renderHtml();
}
});
});
</script>
</body>
</html>
-------------------封装的waterFull函数---------------------------
/*封装一个瀑布流插件*/
(function($){
$.fn.WaterFall = function(){
/*把当前盒子下面的所有的子元素初始化成瀑布流的布局*/
/*瀑布流容器*/
var $this = $(this);
var parentWidth = $this.width();
/*瀑布流容器当中的item*/
var items = $this.children();
var childWidth = items.width();
/*多少列*/
var columnCount = 5;
/*间距*/
var space = (parentWidth - childWidth * columnCount)/(columnCount-1);
/*需要记录高度的变化 每一列的高度的变化*/
var columnArray = [];
/*遍历items盒子*/
items.each(function(index,obj){
/*当前的遍历到对象*/
var $obj = $(obj);
var height = $obj.height();
/*第一列有点特殊 所有的top都是0 当前还是没有高度columnArray*/
if(index < columnCount){
columnArray[index] = height;
/*针对每一个盒子设置定位*/
$obj.css({top:0,left:index*(childWidth+space)});
}
/*正常情况下*/
else{
/*每一次都需要追加到最矮的那一列*/
/*怎么样找到最矮的那一列？？？*/
/*假设 我们先的第一个数据就是 最矮的*/
var min = columnArray[0];
var min_index = 0;
for(var i = 0 ; i < columnArray.length ; i ++){
if( min > columnArray[i]){
min = columnArray[i];
min_index = i;
}
}
/*当我们加一个盒子之后 我们要跟新当前列的高度*/
columnArray[min_index] += height +10;
/*算定位*/
$obj.css({
top: min + 10,
left:min_index*(childWidth+space)
});
/*min_index 就是你去追加的那一个列的索引*/
}
//console.log("当前每一列的高度："+columnArray);
});
/*最后来设置瀑布流容器的高度*/
/*获取最高的那一列*/
var max = columnArray[0];
for(var j = 0;j<columnArray.length;j++){
if(max < columnArray[j]){
max = columnArray[j];
}
}
$this.height(max);
}
})(jQuery);
---------------------------------------模拟的后台php数据-------------------------------------------
<?php
header('Content-Type:text/html; charset=utf-8');
/* 读取json数据*/
$data = file_get_contents('data.json');
/* 转换成PHP数组*/
$data = json_decode($data);
/* 根据页码计算offset*/
$page = $_GET['page'];
$pageSize = $_GET['pageSize'];
/* 每页的数据*/
$offset = ($page - 1) * $pageSize;
/* 截取10条数据*/
$result = array_slice($data, $offset, $pageSize);
/* 翻页*/
$page++;
echo json_encode(array('page'=>$page, 'items'=>$result));
sleep(1);
?>
----------------------------------------------模拟的json数据-------------------------------------------------
[
{
"path": "./images/1.jpg",
"text": "一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/2.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/3.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/4.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/5.jpg",
"text": "青春，青春，一场盛世不平一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/6.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/7.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/8.jpg",
"text": "青春，青春，一场盛世不平凡。一支素时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/9.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/10.jpg",
"text": "青春，青春，一场盛世不平凡花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/11.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/12.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/13.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/14.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/15.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/16.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/17.jpg",
"text": "青春，青春，一场盛世不平凡。一时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/18.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/19.jpg",
"text": "青春，青春，一场盛世不花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/20.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/21.jpg",
"text": "青春，青春，一场一杯花茶，一段时光一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/22.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/23.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/24.jpg",
"text": "青春，青春，一场盛一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/25.jpg",
"text": "青春，青春，一场盛一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/26.jpg",
"text": "青春，青春，一场盛世，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/27.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/28.jpg",
"text": "一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/29.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/30.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/31.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/32.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/33.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/34.jpg",
"text": "青春，青春，一场盛世不平凡。倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/35.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/36.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/37.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/38.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/39.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/40.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/41.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/42.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/43.jpg",
"text": "青春，青春，一场盛世不平凡。一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/44.jpg",
"text": "青春，青春，一场段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/45.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/46.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/47.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/48.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/49.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一一一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/50.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/51.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/52.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/53.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/54.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/55.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安笑又安笑又安笑又安笑又安笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/56.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/57.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/58.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/59.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/60.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/61.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/62.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/63.jpg",
"text": "青春，青春，一场盛世不平一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/64.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/65.jpg",
"text": "青春，青春，一场盛世茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/66.jpg",
"text": "青春，青春，一场花茶，一段时光，浅笑时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/67.jpg",
"text": "青春，青春，一场盛世不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/68.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/69.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/70.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/71.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/72.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/73.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/74.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/75.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/76.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/77.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/78.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/79.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/80.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/81.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/82.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/83.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/84.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/85.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/86.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/87.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/88.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/89.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/90.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/91.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/92.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/93.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/94.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/95.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/96.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/97.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/98.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/99.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/100.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/101.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/102.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/103.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/104.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
},
{
"path": "./images/105.jpg",
"text": "青春，青春，浅笑又安然一场盛世的繁华，愿不倾城，不倾国，只倾我所有。只为过简单安稳的生活，单纯不平凡。一支素笔，一杯花茶，一段时光，浅笑又安然。早安！"
}
]
