寫一個CSS瀑布流佈局
阿新 • • 發佈：2018-12-23
先看效果：
再看看手機端：
具體程式碼，這裡的圖片大家自行替換，不用我說了，，我用的是外鏈可能失效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .waterfall { width: 95%; column-gap:10px; column-count: 4; margin:auto; } .item { text-align: center; padding: 10px; margin-bottom: 10px; break-inside: avoid; border: 1px solid #000; } img { width: 100%; } p { line-height: 30px; } @media (min-width: 992px) and (max-width: 1300px) { .waterfall { column-count: 3; } p { color:red; } } @media (min-width: 768px) and (max-width: 991px) { .waterfall { column-count: 1; } p { color: orange; } } @media (max-width: 767px) { .waterfall { column-count: 1; } } </style> </head> <body> <div class="waterfall"> <div class="item"> <img src="http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg" alt="" /> <p>白海棠（紅樓夢）</p> <p>半卷湘簾半掩門，碾冰為土玉為盆。</p> <p>偷來梨蕊三分白，借得梅花一縷魂。</p> <p>月窟仙人縫縞袂，秋閨怨女試啼痕。</p> <p>嬌羞默默同誰訴，倦倚西風夜已昏。</p> </div> <div class="item"> <img src="http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg" alt="" /> <p>畫堂春（納蘭容若）</p> <p>一生一代一雙人，爭教兩處銷魂？</p> <p>相思相望不相親，天為誰春。</p> <p>漿向藍橋易取，藥成碧海難奔，</p> <p>若容相仿日牛津，相對忘貧。</p> </div> <div class="item"> <img src="http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg" alt="" /> <p>一字詩（陳沆）</p> <p>一帆一江一漁舟，一個漁翁一釣鉤。</p> <p>一俯一仰一場笑，一江明月一江秋。</p> </div> <div class="item"> <img src="http://pic1.win4000.com/wallpaper/2018-12-13/5c12178351394.jpg" alt="" /> <p>七絕</p> <p>黃昏雨落一池秋，晚來風向萬古愁。</p> <p>不厭浮生唯是夢，緣求半世但無儔。</p> <p>一顰一笑一傷悲，一生痴迷一世醉。</p> <p>一磋一嘆一輪迴，一寸相思一寸灰。</p> <p>功名萬里賦予誰，去年秋江水，</p> <p>醉臥不識今夜愁，哀箏惹淚落，誰勸我千杯？</p> <p>往事難追戰馬肥，胡笳送君歸，</p> <p>修道心事無人猜，青雲羨慕鳥，尊前圖一醉。</p> </div> </div> </body> <script> </html>
OK