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