PS制作流體瀑布文字效果步驟新建畫(huà)布，背景為深藍(lán)色用矩形工具繪制矩形，顏色比背景深一點(diǎn)的藍(lán)色CTRL+T選擇矩形，按SHIFT旋轉(zhuǎn)15度使用文字工具輸入“psahz”文字填充為白色，CTRL+T旋轉(zhuǎn)如圖右鍵選擇斜切，同樣15度調(diào)整。

1該效果使用CSS3的columnwidth實(shí)現(xiàn)，和js版的瀑布流不同圖片將縱向排列2代碼中使用了一小段JS，和瀑布流效果無(wú)關(guān)，主要用來(lái)動(dòng)態(tài)插入元素，并實(shí)現(xiàn)模擬翻頁(yè) 舉例說(shuō)明 如圖。

瀑布流網(wǎng)站主要是以圖片為主，文字內(nèi)容較少，在優(yōu)化的時(shí)候，注意圖片盡量的原創(chuàng)，如果是在網(wǎng)上下載的已收錄圖片建議稍微的做一下處理，如改變圖片大小圖片加工處理等做好這些之后，必要的ALT標(biāo)簽，記住要合理的去布局關(guān)鍵。

前端瀑布流布局是一種常見(jiàn)的網(wǎng)頁(yè)布局方式，通常用于展示圖片文章等內(nèi)容，在不同屏幕尺寸下可以實(shí)現(xiàn)自適應(yīng)因此，前端瀑布流布局是可以實(shí)現(xiàn)自適應(yīng)的在實(shí)現(xiàn)自適應(yīng)的前端瀑布流布局時(shí)，可以使用 CSS 的彈性布局flexbox或。

那么接下來(lái)就基于這個(gè)特點(diǎn)開(kāi)始瀑布流探索之旅基礎(chǔ)功能實(shí)現(xiàn)首先我們定義好一個(gè)有 20 張圖片的容器， #waterfall position relative waterfallbox float left width 200px。

在網(wǎng)站后臺(tái) 找到論壇欄目下面的版塊管理按鈕，選擇編輯自己想要開(kāi)啟瀑布流的那個(gè)版塊，在該模塊的 擴(kuò)展設(shè)置 里 開(kāi)啟圖片列表模式很多時(shí)候，設(shè)置的瀑布流的模塊已經(jīng)有帖子了，此時(shí)可以重建主題封面實(shí)現(xiàn) 在后臺(tái)的工。

其實(shí)這種jquery的插件真的比較多，百度下就有很多結(jié)合兩個(gè)jquery插件jquery瀑布流插件blocksit和圖片延遲加載插件jquerylazyload可以實(shí)現(xiàn)向百度首頁(yè)那種延遲加載的瀑布流樣式而且代碼也比較簡(jiǎn)單function quotimglazyquot。