成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

純CSS響應(yīng)式瀑布流 columns

番茄西紅柿 / 1292人閱讀

摘要：效果圖縮小一點板端雞端瘋六這個響應(yīng)式瀑布流誤打誤撞寫出來的，因為之前看百度寫過瀑布流，不太好，好復(fù)雜，又要什么的，我就懶，算了算了，不寫了。

效果圖 

PC 1366*768


縮小一點



板端



雞端 瘋六 



這個響應(yīng)式瀑布流誤打誤撞寫出來的，因為之前看百度寫過瀑布流，不太好，好復(fù)雜，又要JS什么的，我就懶，算了算了，不寫了。

然后今天早上就看完數(shù)據(jù)結(jié)構(gòu)教程，無聊，順便看慕課網(wǎng)的瀑布流教程，發(fā)現(xiàn)一般般，不過學(xué)到了用columns，然后又谷歌到了 break-inside 額，發(fā)現(xiàn)很OK喔，就OK了。


我習慣寫注釋在代碼那里，這樣感覺容易看懂些，不然看一下代碼，看一下解釋，麻煩。

滾到最下面是全部代碼。

CSS代碼：核心 * { margin: 0; padding: 0; }
.waterfalls { padding:10px; position: relative; margin: 0 auto; columns:200px;  /* 每列每個元素最小的寬度 */ column-gap: 20px; /* 每列的距離，不設(shè)置這個可以通過margin來設(shè)置邊距 */ }
.box { break-inside: avoid; /* 這個是設(shè)置多列布局頁面下的內(nèi)容盒子如何中斷，如果不加上這個，每列的頭個元素就不會置頂，配合columns使用 */ margin-bottom:15px;

/* 如果是非圖片瀑布流的話就加上背景吧，不然感覺不太好看。 */

/* background:dodgerblue; */  color:white; border-radius:5px; }
.pic img {  width: 100%; /* 建議每個圖片寬高為100%，如果不設(shè)置寬高，就會溢出外層盒子的，或者設(shè)置固定寬度，最好不要寬過外層盒子或者高過外層盒子。這里說的外層盒子就是html代碼里的 .box */ height: 100%;  border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } 不加一些樣式的問題：

不加 break-inside: avoid;

就是每列元素不置頂嘛，而break-inside: avoid; 我也是剛學(xué)的，不太大懂意思

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/7080.html

相關(guān)文章

  • 純CSS響應(yīng)式瀑布流 columns

    摘要：效果圖縮小一點板端雞端瘋六這個響應(yīng)式瀑布流誤打誤撞寫出來的，因為之前看百度寫過瀑布流，不太好，好復(fù)雜，又要什么的，我就懶，算了算了，不寫了。效果圖?PC 1366*768showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad4b60c469301f);縮小一點showImg(https://user-gold-cdn.xitu.io/2019...

    levius 評論0 收藏0

  • 純css實現(xiàn)瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感覺還是很吸引人的，最近又看到實現(xiàn)瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現(xiàn)瀑布流還是有點懵的樣子，不過現(xiàn)在就可以明白它的原理了 1.multi-column多列布局實現(xiàn)瀑布流 先簡單的講下multi-column相關(guān)的部分屬性 column-count設(shè)置列數(shù) column-gap設(shè)置列與列之間的間距 column-width設(shè)置每列的寬度 還要結(jié)合在子容器中...

    DC_er 評論0 收藏0

  • 純css實現(xiàn)瀑布流（multi-column多列及flex布局）

    瀑布流的布局自我感覺還是很吸引人的，最近又看到實現(xiàn)瀑布流這個做法，在這里記錄下，特別的，感覺flex布局實現(xiàn)瀑布流還是有點懵的樣子，不過現(xiàn)在就可以明白它的原理了 1.multi-column多列布局實現(xiàn)瀑布流 先簡單的講下multi-column相關(guān)的部分屬性 column-count設(shè)置列數(shù) column-gap設(shè)置列與列之間的間距 column-width設(shè)置每列的寬度 還要結(jié)合在子容器中...

    MangoGoing 評論0 收藏0

  • 瀑布流之實例進階

    摘要：瀑布流也應(yīng)該算是流行幾年了吧。開始刷新的設(shè)置就很簡單了，瀑布流刷新只和一個事件有關(guān)，即，主要的算法即，當頁面滑動到最低高度的時候開始加載節(jié)點并且添加，當然，節(jié)點添加的個數(shù)是不固定的。這時候，就需要獲取實際尺寸然后進行一個計算才行。 瀑布流也應(yīng)該算是流行幾年了吧。首先是由Pinterest掀起的浪潮，然后國內(nèi)設(shè)計如雨后春筍般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不過最近涉黃，...

    Baoyuan 評論0 收藏0

  • 瀑布流插件Masonry中文文檔【翻譯】

    摘要：本位為官方文檔翻譯，原始鏈接安裝下載下載壓縮或未壓縮的壓縮未壓縮在直接飲用文件。排列未加載完成的圖片時會導(dǎo)致元素的重疊，可以解決這個問題。布局組件尺寸尺寸配置項和可以可以設(shè)置組件的列寬和間距。增加移除控件在瀑布流末尾增加新控件并重排。 本位為Masonry官方文檔翻譯，原始鏈接 安裝Install 下載 下載壓縮或未壓縮的masonry masonry.pkgd.min.js （壓縮...

    soasme 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<