Angular与isotopejs与imagesLoaded 无限加载 图片 瀑布流

[TOC]

Angular.js

Angular.js是一款优秀的前端框架，在web与wap中可以通过简单的代码实现复杂的无刷新加载、切换、删除与其他js效果

Isotope.js

这是一款功能非常强大的前端布局js插件，通吃瀑布流、栅格、懒加载、排序等！前端有了它，女神抱回家！！！

imagesLoaded

专业的图片加载插件，可以分块或全局检测图片是否加载完成，是angular与isotope的耦合器

代码

代码分为html代码，angular代码，接口没啥好说的，核心代码在Angular指令那一块的耦合器imagesLoaded，它保证angular的图片加载完成后再进行布局排版，否则图片未加载完成导致布局错乱无法得到解决。

html代码

//以上是用的所有的js代码

一个指令，就只么多吧！

注：指令的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:'' +
                        '
' +
                            ''+
                        '
'+
                '',
        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但是还是稳！