簡介:瀑布流布局是網站比較流行的一種布局方式。本案例將深入講解實現(xiàn)瀑布流布局的三大方式:JavaScript、jQuery和CSS3,你將學習到如何用JavaScript方法實現(xiàn)圖片的定位及排序、兩種不同的方式對圖片進行持續(xù)加載,以及CSS3中多欄布局怎么實現(xiàn)瀑布流布局。
第2章 JavaScript原生方法實現(xiàn)瀑布流布局
此方法分為三個步驟:用HTML+CSS實現(xiàn)瀑布流布局頁面結構、 JavaScript實現(xiàn)圖片定位和排序,最后用onscroll事件實現(xiàn)瀑布流布局的圖片加載功能。
第3章 jQuery實現(xiàn)瀑布流布局
jQuery方法比JavaScript原生方法簡潔,主要在瀑布流布局中實現(xiàn)圖片定位、排序及加載方面進行實現(xiàn)。
第4章 CSS3實現(xiàn)瀑布流布局
用CSS3的多欄布局實現(xiàn)瀑布流布局,并對columns 屬性進行詳細講解。
第5章 瀑布流布局實現(xiàn)方式比較
對利用JavaScript原生實現(xiàn)方式與CSS3多欄布局實現(xiàn)方式進行對比,分析優(yōu)劣。