一直用Vue做項(xiàng)目，需要做一個(gè)瀑布流加載檬寂，雖然以前也寫過(guò)瀑布流终抽，但是當(dāng)你從服務(wù)器請(qǐng)求數(shù)據(jù)在渲染在頁(yè)面的時(shí)候會(huì)有高度不準(zhǔn)確的問(wèn)題，所以帶來(lái)了一個(gè)全新的瀑布流桶至。
用到Vue2和axios 這兩個(gè)文件
Vue2地址：https://cn.vuejs.org/v2/guide/installation.html
axios地址：https://www.npmjs.com/package/axios
至于樣式昼伴，作為一個(gè)有追求的前端咱們自己調(diào)下就好了
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>
當(dāng)然你需要一個(gè)后臺(tái)文件，不會(huì)寫的也沒關(guān)系镣屹，我也是找我后臺(tái)幫我寫的圃郊，分享大家。
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);
至于圖片你不能再管我要了吧女蜈？不過(guò)我可以給你我的圖片名字方便你把你的圖片修改下名字即可持舆。
img圖片名稱例子：1.jpg。 簡(jiǎn)約大方 伪窖。
