angular組件－特殊的瀑布流（原創(chuàng)）

Yi_Zhi_Yu 發(fā)布于2019-08-20 11:02 / 2981人閱讀

摘要：正如上篇文章說的，由于項目中的樣式有點特殊要求，所以自己在項目中寫了一個瀑布流組件，在這里分享下，由于最近沒太多時間，趁中秋把這個組件發(fā)上來，寫的不是很詳細，畢竟中秋，我的心已經(jīng)發(fā)出去啦。

ng-water-scroll

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

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

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

滾動的容器高度固定

Demo

Bower

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

Usage

waterScroll Parameters

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

scroll-load: 當(dāng)滾動到合適的距離時，他會觸發(fā)這個的方法

scroll-container: 指定數(shù)據(jù)存貯的容器

loadding-info: 當(dāng)數(shù)據(jù)加載時，出現(xiàn)加載數(shù)據(jù)html片段

load-disabled: 是否允許數(shù)據(jù)加載

Event

scrollLoadingFinfish 數(shù)據(jù)加載完成

stopLoading 停止繼續(xù)加載數(shù)據(jù)

startLoading 重新開始加載數(shù)據(jù)

云服務(wù)器 GPU云服務(wù)器瀑布流瀑布流方式 gridview瀑布流 jquery瀑布流

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/80357.html

相關(guān)文章

angular組件(ngKeybordSelect)－通過鍵盤實現(xiàn)多選

摘要：在剛剛結(jié)束的交易系統(tǒng)項目中有幾個需求是讓我感覺要花點時間的如何更優(yōu)雅的使用的框。通過鍵盤實現(xiàn)多選，批量選的功能。所以自己寫了后面兩個指令。在剛剛結(jié)束的angular交易系統(tǒng)項目中有幾個需求是讓我感覺要花點時間的如何更優(yōu)雅的使用angular-bootstrap 的 Modal框。通過鍵盤實現(xiàn)ctrl多選，shfit批量選的功能。如何在angular去實現(xiàn)瀑布流后面兩個我都...

novo 2019-08-20 10:33 評論0 收藏0
Webpack + Angular的組件化實踐

摘要：最近寫復(fù)旦二手平臺的時候開始嘗試用一直推崇了很久的組件化。經(jīng)過一番抉擇之后選擇了的組合。所以在這里分享一下具體的實踐流程。自己有自己獨特的依賴注入以及模塊聲明方式，看起來似乎和是水火不容的，但事實上他們完全可以融合。最近寫復(fù)旦二手平臺的時候開始嘗試用一直推崇了很久的組件化。經(jīng)過一番抉擇之后選擇了 webpack + angular 的組合。所以在這里分享一下具體的實踐流程。 Web...

neuSnail 2019-08-21 10:44 評論0 收藏0
瀑布流插件Masonry的配置和使用

摘要：是最流行的瀑布流插件之一，配置簡單，功能強大，在上收獲了。如果你想使用瀑布流提升網(wǎng)站體驗，將是不錯的選擇。瀑布流，又稱瀑布流式布局。需要注意的是，如果你需要加載圖片，不會在圖片加載完后重新布局，這可能會影響你的布局效果，建議配合使用插件。 Masonry是最流行的瀑布流插件之一，配置簡單，功能強大，在Github上收獲了1w+ stars。如果你想使用瀑布流提升網(wǎng)站體驗，Masonry...

waterc 2019-08-22 10:42 評論0 收藏0
瀑布流插件Masonry中文文檔【翻譯】

摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時會導(dǎo)致元素的重疊，可以解決這個問題。布局組件尺寸尺寸配置項和可以可以設(shè)置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。本位為Masonry官方文檔翻譯，原始鏈接安裝Install 下載下載壓縮或未壓縮的masonry masonry.pkgd.min.js （壓縮...

soasme 2019-08-22 15:18 評論0 收藏0
用vue.js寫的一個瀑布流的組件

摘要：有三個參數(shù)將被渲染的元素是一個，在渲染子元素的合適時機例如的事件里，調(diào)用即可。從里面拿到一個元素，找出當(dāng)前高度最小的一列，將放入該列。渲染，然后調(diào)用方法進入瀑布流還有個常見的功能就是滾動加載了，目前尚未加入此功能，會盡快加上。很少寫文章，很亂，，見諒。我所見過的瀑布流都是固定的幾列，然后每一列包含若干個元素（圖文元素），每一列的總高度都差不多。所以我這個組件的功能就很簡單，可以設(shè)...

AlphaWallet 2019-08-21 12:01 評論0 收藏0