ng-water-scroll

正如上篇文章說的，由于項目中的樣式有點特殊要求，所以自己在項目中寫了一個瀑布流組件，在這里分享下，由于最近沒太多時間，趁中秋把這個組件發上來，寫的不是很詳細，畢竟中秋，我的心已經發出去啦。有問題的可以留言，多謝大家支持

寫完這篇指令估計不會再寫關于ng1.x的文章了，我會把重心放在ng2，多謝大家支持

使用這個指令來實現瀑布流的效果，但是這個指令適用有局限性,當你需求滿足以下幾點的時候，你可以使用這個指令來完成瀑布流效果，如果你發現你的需求不滿足以下條件，你可以嘗試下 ngInfiniteScroll

• 滾動的容器高度固定

Demo

---

• Demo

Bower

---

bower install --save-dev ng-water-scroll

Usage

---

<ANY water-scroll scroll-container="containIdName" style="overflow: scroll;height:600px;" scroll-load="fn()"><ANY id="containIdName"></ANY> </ANY>

waterScroll Parameters

---

• scroll-distance: 觸發scroll-load方法的距離，該距離代表滾動條距離底部的高度，目前只支持像素范圍，只需輸入數字，不需要輸入單位

• scroll-load: 當滾動到合適的距離時，他會觸發這個的方法

• scroll-container: 指定數據存貯的容器

• loadding-info: 當數據加載時，出現加載數據html片段

• load-disabled: 是否允許數據加載

Event

---

• scrollLoadingFinfish 數據加載完成

• stopLoading 停止繼續加載數據

• startLoading 重新開始加載數據

總結

以上是生活随笔為你收集整理的angular组件－特殊的瀑布流（原创）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。