常見的瀑布流就是Masonry,相信知道及用過的人不少.
不過因為常常被要求做瀑布流,還要分類、什麼彈出的效能所以不得以去研究了一下Masonry相關的延伸和應用。
把筆記記在這裡囉~
傳送:Masonry
瀑布流的好處就是每張圖長寬大小不一時,它會自動幫你縮到你css訂好的寬度,序往下排,不用另外裁切。
圖片要有大有小的話要自己計算好,如要他自適性排列剛好的layout的話,要用packery或是isotope,或是需要再看Doc研究一下=w=
傳送:GridLoadingEffects
是Mary Lou寫的套件,結合了Masonry和各種效果。可以看他相關文章寫了很多前端特效,裡面都有DEMO和Download,可以用超屌來形容,我每次看都讚嘆不已。
傳送:Packery
傳送:Isotope
類似:mixitup
對於Masonry,我對作者David DeSandro真的是邊哭邊跪謝阿qmq!
心中無限感激(膜拜)
不過因為常常被要求做瀑布流,還要分類、什麼彈出的效能所以不得以去研究了一下Masonry相關的延伸和應用。
把筆記記在這裡囉~
瀑布流的種類
*Masonry
效果:基本型瀑布流傳送:Masonry
瀑布流的好處就是每張圖長寬大小不一時,它會自動幫你縮到你css訂好的寬度,序往下排,不用另外裁切。
圖片要有大有小的話要自己計算好,如要他自適性排列剛好的layout的話,要用packery或是isotope,或是需要再看Doc研究一下=w=
*GridLoadingEffects(Masonry)
效果:圖片載入特效,下拉瀑布流會彈出圖片的效果不同,可以選自己喜歡的。傳送:GridLoadingEffects
是Mary Lou寫的套件,結合了Masonry和各種效果。可以看他相關文章寫了很多前端特效,裡面都有DEMO和Download,可以用超屌來形容,我每次看都讚嘆不已。
*Packery
效果:樣子長的跟masonry很像,但可以用滑鼠拖移換位置傳送:Packery
*Isotope
效果:可以有分類功能,最新消息或是作品集分類常看到傳送:Isotope
類似:mixitup
其他
*瀑布流範例網站
Lexus對於Masonry,我對作者David DeSandro真的是邊哭邊跪謝阿qmq!
心中無限感激(膜拜)
沒有留言:
張貼留言