基於angularjs的瀑布流插件angular-waterfull.js

最近的項目中，是用angularjs寫的，領導要求，其中的效果都用angular去寫。

這不，對接數據後就遇到問題啦，關於瀑布流的問題。

之前是用的masonry.js這個插件，這個插件也很好，但是在與後臺對接後，佈局就亂了，我是百思不得其解，爲什麼對接前好好的，對接後就不行啦。。。

後來就找呀找，也試了很多其他插件，雖然都是打着angularjs的名義，但是個人試用了幾個，沒有效果，不知道是不是我的水平問題，反正我是沒有搞出來。

最後終於找到angular-waterfull.js這個插件。在一番修改之下，最後終於如願以償。

這是原文地址：angular-waterfull.js  萬能的github。

引入js文件

<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-waterfall.js"></script>

然後，模塊注入

angular.module('angularWaterfallApp',["ngWaterfall","ui.router"])

注意，這個地方中括號裏面的ui.router是另一個js（angular-ui-router.min.js）文件裏的，如果不需要這個js文件可以去掉ui.router，只寫

angular.module('angularWaterfallApp',["ngWaterfall","ui.router"])

然後就是html這部分啦

<ul class="waterfall-list" ng-waterfall cols="6">
        <li ng-repeat="image in images" repeat-finished>
            <div class="data-block">
                <img src="{{image.url}}" alt="{{image.summary}}"/>
                <p>{{image.title}}</p>
                <p>{{image.summary}}</p>
            </div>
        </li>
     <div class="loadMore" ng-if="loadMore" ng-infinite-scroll ng-click="loadMoreData()">{{text}}</div>
</ul>

注意，這部分是用的ul,li標籤，我當時寫的時候用的div,出現報錯，這部分，大家寫的時候要注意下，如果自己寫的標籤沒有用ul，li出現報錯，不放換回來試試。

在github上提供的下載文件，裏面沒有angular.js文件和angular-ui-router.min.js文件，大家在試看效果的時候，要補齊插件，也可以刪掉相對應的代碼，不然會報錯而沒有內容。

這個機遇angularjs的瀑布流插件，正好滿足我們的項目要求，所以我個人認爲非常好，另外一個好處在於它提供監聽滾輪事件的方法，使push後的數據依然遵循瀑布流規則，之前我嘗試的幾個插件都沒有滿足這個要求，也可能是我水平問題，沒有試出來。

下面是它的監聽滾輪事件加載新數據的方法：

page++;

 $scope.$on("waterfall:loadMore",function(){//滾動自動填充事件
    $scope.loadMoreData();
})

如果你需要用滾輪滾到底部加載，可以用這個方法，如果不需要，那就用上面的代碼的那部分

<div class="loadMore" ng-if="loadMore" ng-infinite-scroll ng-click="loadMoreData()">{{text}}</div>

點擊事件加載新數據。

提供的下載文件裏main.js有相關的代碼，大家可以看看。

總之，這個插件是很不錯的。