Vue jquery.masonry 滑动自动加载 瀑布流

虽然masonry.pkgd.min.js最新版本是4.2.0,但是本文章中采用的是V2.1.04，这里面已经集成了imagesloaded，所以不需要引入2次

div代码为

<div class="main" id="app">    <div class="wrapper" id="wrapper"><div id="list"><div class="article" v-for="x in data"><a :href="'mobile-read-detail.html?no='+x.no"><img :src="x.thumb"><span>{{x.title}}</span></a></div></div></div></div>

Vue初始化：

var v1 = new Vue({el:"#app",data:{data:{},loading:false,page:1,finish_load:false,},methods:{get: function (page) {var _self = this;var category = $_GET['category'];if(category == undefined) {category = 0;}_self.loading = true;var data = {page:page,category:category};request("/index.php/Read/lists", data, function (result) {if(_self.data.length == undefined) {_self.data = result;} else {_self.data = _self.data.concat(result);}if(result.length < 10) {_self.finish_load = true;$("#tip").html("所有文章加载完毕").show();}_self.loading = false;_self.$nextTick(function(){masonry_init();//alert('v-for渲染已经完成')})});},loadmore:function(page) {this.page++;this.get(this.page);},},created:function() {this.get(1);}});

_self.$nextTick

是在dom渲染完之后执行的，执行的方法为

function masonry_init() {$container.imagesLoaded(function() {$('#list').masonry('reload');});}

在页面滑动的时候自动加载：

$(window).scroll(function() {var viewH = $(window).height();var contentH = $("body")[0].scrollHeight;var scrollTop = $(window).scrollTop(); //滚动高度if ((scrollTop + viewH) >= (contentH - 100)) {if (!v1.loading && !v1.finish_load) {$("#tip").html("正在加载中……").show();v1.loading = true;v1.loadmore();}}})

初始化的时候初始化瀑布流：

$container = $('#list');$container.imagesLoaded(function() {$container.masonry({itemSelector: '.article',columnWidth: 2 //每两列之间的间隙为5像素});});

测试成功！