Vue如何写一个瀑布流加载
2017-07-21 本文已影响0人
BrightenSun
一直用Vue做项目，需要做一个瀑布流加载，虽然以前也写过瀑布流，但是当你从服务器请求数据在渲染在页面的时候会有高度不准确的问题，所以带来了一个全新的瀑布流。
用到Vue2和axios 这两个文件
Vue2地址：https://cn.vuejs.org/v2/guide/installation.html
axios地址：https://www.npmjs.com/package/axios
至于样式，作为一个有追求的前端咱们自己调下就好了
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/global.css">
<style>
ul{
width:calc(100% / 2);
}
ul img{
width:100%;
}
ul p{
text-align:center;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<div class="clearFix">
<ul class="left fl">
</ul>
<ul class="right fl">
</ul>
<ul class="list fl">
<li v-for="item in items">
<img :src=item.imgsrc alt="">
<div>
<p>{{item.msg}}</p>
</div>
</li>
</ul>
</div>
<input type="button" name="" value="添加" @click="getList">
</div>
<script type="text/javascript">
new Vue({
el:"#app",
created(){
this. getList();
},
data:{
items:[]
},
methods:{
getList(){
var _this = this;
axios.get('index.php')
.then(function (response) {
for(var i=0;i<response.data.length;i++){
_this.items.push(response.data[i]);
}
setTimeout(function(){
var aLi = document.querySelectorAll('.list li');
var oLeft = document.querySelector('.left');
var oRight = document.querySelector('.right');
var aImg = document.querySelectorAll('.list li img');
for(var i=0;i<aLi.length;i++){
if(oLeft.offsetHeight > oRight.offsetHeight){
oRight.appendChild(aLi[i]);
}else{
oLeft.appendChild(aLi[i]);
}
}
},50)
})
.catch(function (error) {
console.log(error);
});
}
}
})
</script>
</body>
</html>
当然你需要一个后台文件，不会写的也没关系，我也是找我后台帮我写的，分享大家。
php文件
<?php
header('content-type:text/html;charset=utf-8');
$arr = array();
$msg = array(
0=>"item1",
1=>"item2",
2=>"item3",
3=>"item4",
4=>"item5",
5=>"item6",
6=>"item7",
7=>"item8",
8=>"item9",
9=>"item10",
);
for($i=0;$i<10;$i++){
$arr[$i] = array(
'imgsrc'=>'imagse/'.($i+1).'.jpg',
'msg'=>$msg[$i],
);
}
echo json_encode($arr);
至于图片你不能再管我要了吧？不过我可以给你我的图片名字方便你把你的图片修改下名字即可。
img图片名称例子：1.jpg。 简约大方 。
