[TOC]
Angular.js
Angular.js是一款优秀的前端框架，在web与wap中可以通过简单的代码实现复杂的无刷新加载、切换、删除与其他js效果
Isotope.js
这是一款功能非常强大的前端布局js插件，通吃瀑布流、栅格、懒加载、排序等！前端有了它，女神抱回家！！！
imagesLoaded
专业的图片加载插件，可以分块或全局检测图片是否加载完成，是angular与isotope的耦合器
代码
代码分为html代码，angular代码，接口没啥好说的，核心代码在Angular指令那一块的耦合器imagesLoaded，它保证angular的图片加载完成后再进行布局排版，否则图片未加载完成导致布局错乱无法得到解决。
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才是你要循环的，下面的items只是形参可以随便写！！
Angular代码
无限加载功能是用的js原生观察器IntersectionObserver监控底部的标签，当标签出现在用户视线，调用加载更多方法。
观察器看阮一峰教程吧IntersectionObserver API 使用教程
Angular初始化
$scope.index_init=function({//初始化gallery，工厂和接口略过
obverse();//调用观察器，实现无线加载
$scope.p=0//页数
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监控到，会重新调用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对应的标签
layoutMode: 'masonry',//瀑布流布局
columnWidth:0,
};
//console.log(element.isotope(options))
var $grid = element.isotope(options);//初始化isotope
$("html").imagesLoaded(function(){//！！！这段代码就是整个项目的核心！！！
$grid.isotope('layout');//所有图片加载完成后，调用排版布局方法
scope.$digest();
})
scope.$watch('items', function(newVal, oldVal){//监听items，发生改变（加载或删除）时，重新布局
$timeout(function(){
$("html").imagesLoaded(function(){//！！！这段代码就是整个项目的核心！！！
element.isotope( 'reloadItems' ).isotope({
masonry: {
columnWidth:0
}
});
scope.$digest();
})
});
},true);
}
};
});
来看看成品吧！
福利！！！该项目demo:月风美女写真！！！
由于IntersectionObserver观察器对手机支持不太友好，项目中已经弃用了，监听scroll虽然很low但是还是稳！
