[TOC]
Angular.js
Angular.js是一款優(yōu)秀的前端框架，在web與wap中可以通過簡單的代碼實(shí)現(xiàn)復(fù)雜的無刷新加載、切換笼踩、刪除與其他js效果
Isotope.js
這是一款功能非常強(qiáng)大的前端布局js插件穷娱，通吃瀑布流、柵格蛋哭、懶加載县习、排序等！前端有了它，女神抱回家Ｔ暝浮Ｅ驯尽！
imagesLoaded
專業(yè)的圖片加載插件彤钟，可以分塊或全局檢測圖片是否加載完成来候，是angular與isotope的耦合器
代碼
代碼分為html代碼，angular代碼样勃，接口沒啥好說的吠勘，核心代碼在Angular指令那一塊的耦合器imagesLoaded，它保證angular的圖片加載完成后再進(jìn)行布局排版峡眶，否則圖片未加載完成導(dǎo)致布局錯亂無法得到解決剧防。
html代碼
<script src="/js/jquery.min.js" type="text/javascript"></script>
<script src="/js/imagesloaded.pkgd.min.js" type="text/javascript"></script>
<script src="/js/isotop.js" type="text/javascript"></script>
<script src="/js/angular.min.js" type="text/javascript"></script>
<script src="/js/app.js" type="text/javascript"></script>
//以上是用的所有的js代碼
<div class="row" id="masonry" data-iso-repeat="galleries">
</div>
一個指令，就只么多吧辫樱！
注：指令的galleries才是你要循環(huán)的峭拘，下面的items只是形參可以隨便寫！狮暑！
Angular代碼
無限加載功能是用的js原生觀察器IntersectionObserver監(jiān)控底部的標(biāo)簽鸡挠，當(dāng)標(biāo)簽出現(xiàn)在用戶視線，調(diào)用加載更多方法搬男。
觀察器看阮一峰教程吧IntersectionObserver API 使用教程
Angular初始化
$scope.index_init=function({//初始化gallery拣展，工廠和接口略過
obverse();//調(diào)用觀察器，實(shí)現(xiàn)無線加載
$scope.p=0//頁數(shù)
indexFactory.ajaxgetindex($scope.p).then(function (d) {
$scope.galleries=d;
})
}
Angular加載更多
$scope.more_gal=function () {
$scope.p++
if($scope.loadnull) return;
indexFactory.ajaxgetindex($scope.p).then(function (d) {
$scope.galleries=$scope.galleries.concat(d);//這里會被$watch監(jiān)控到缔逛，會重新調(diào)用isotope布局方法
if(d==false||d==null||d==[]||d==undefined){
$scope.loadnull=true;//沒有更多了
}
})
}
Angular指令
[你的app].directive('isoRepeat', function ($timeout) {
return {
scope: {
items: '=isoRepeat'
},
template:'<gall ng-repeat="item in items" class="col-lg-3 col-md-4 col-sm-6 col-xs-12">' +
'<div class=" grid-portfolio">' +
'<img ng-src="{{item.main_pic}}" alt=""/>'+
'</div>'+
'</gall>',
link: function (scope, element, attrs) {
console.log(element)
var options = {
animationEngine : 'jquery',
itemSelector: 'gall',//repeat對應(yīng)的標(biāo)簽
layoutMode: 'masonry',//瀑布流布局
columnWidth:0,
};
//console.log(element.isotope(options))
var $grid = element.isotope(options);//初始化isotope
$("html").imagesLoaded(function(){//１赴！！褐奴！這段代碼就是整個項目的核心０唇拧！敦冬！
$grid.isotope('layout');//所有圖片加載完成后辅搬，調(diào)用排版布局方法
scope.$digest();
})
scope.$watch('items', function(newVal, oldVal){//監(jiān)聽items，發(fā)生改變（加載或刪除）時脖旱，重新布局
$timeout(function(){
$("html").imagesLoaded(function(){//？八臁！萌庆！這段代碼就是整個項目的核心Ｈ芡省！踊兜！
element.isotope( 'reloadItems' ).isotope({
masonry: {
columnWidth:0
}
});
scope.$digest();
})
});
},true);
}
};
});
來看看成品吧！
福利＜烟瘛Ｄ缶场于游！該項目demo:月風(fēng)美女寫真！５嫜浴贰剥！
由于IntersectionObserver觀察器對手機(jī)支持不太友好，項目中已經(jīng)棄用了筷频，監(jiān)聽scroll雖然很low但是還是穩(wěn)蚌成！
