基于CSS3的CSS 多欄(Multi-column)實(shí)現(xiàn)瀑布流源碼分享
發(fā)布時(shí)間:2014-06-11 11:22:58 作者:佚名
我要評(píng)論

瀑布流,又稱瀑布流式布局。是比較流行的一種網(wǎng)站頁面布局,視覺表現(xiàn)為參差不齊的多欄布局,隨著頁面滾動(dòng)條向下滾動(dòng),這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。我們只是實(shí)現(xiàn)了多欄的布局。
CSS 多欄(Multi-column) : http://www.w3chtml.com/css3/properties/multi-column/
Properties 屬性 |
CSS Version 版本 |
Inherit From Parent 繼承性 |
Description 簡介 |
---|---|---|---|
columns | CSS3 | 無 | CSS3 columns 屬性,是復(fù)合屬性,設(shè)置或檢索對象的列數(shù)和每列的寬度。 |
column-width | CSS3 | 無 | CSS3 column-width 屬性,設(shè)置或檢索對象每列的寬度 |
column-count | CSS3 | 無 | CSS3 column-count 屬性,設(shè)置或檢索對象的列數(shù) |
column-gap | CSS3 | 無 | CSS3 column-gap 屬性,設(shè)置或檢索對象的列與列之間的間隙 |
column-rule | CSS3 | 無 | CSS3 column-rule 屬性,是復(fù)合屬性。設(shè)置或檢索對象的列與列之間的邊框。 |
column-rule-width | CSS3 | 無 | CSS3 column-rule-width 屬性,設(shè)置或檢索對象的列與列之間的邊框厚度。 |
column-rule-style | CSS3 | 無 | CSS3 column-rule-style 屬性,設(shè)置或檢索對象的列與列之間的邊框樣式。 |
column-rule-color | CSS3 | 無 | CSS3 column-rule-color 屬性,設(shè)置或檢索對象的列與列之間的邊框顏色。 |
column-span | CSS3 | 無 | CSS3 column-span 屬性,設(shè)置或檢索對象元素是否橫跨所有列。 |
column-fill | CSS3 | 無 | CSS3 column-fill 屬性,設(shè)置或檢索對象所有列的高度是否統(tǒng)一。 |
column-break-before | CSS3 | 無 | CSS3 column-break-before 屬性,設(shè)置或檢索對象之前是否斷行。 |
column-break-after | CSS3 | 無 | CSS3 column-break-after 屬性,設(shè)置或檢索對象之后是否斷行。 |
column-break-inside | CSS3 | 無 | CSS3 column-break-inside 屬性,設(shè)置或檢索對象內(nèi)部是否斷行。 |
先來寫一個(gè)簡單的圖片頁面
復(fù)制代碼
代碼如下:<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="../lib/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<div id="main">
<div class="box">
<div class="pic">
<img src="">
</div>
</div>
<div class="box">
<div class="pic">
<img src="">
</div>
</div>
<!-- 這里省略多個(gè)class為box的div-->
<div class="box">
<div class="pic">
<img src="">
</div>
</div>
</div>
</body>
<script type="text/javascript">
var width = 300, height = 300;
$('.box img').each(function(){
// 隨機(jī)圖片的高寬,如果大小一樣,就沒必要用瀑布流了
width = Math.floor(Math.random() * 100) + 300;
height = Math.floor(Math.random() * 500) + 300;
$(this).attr('src', 'http://jb51.net/'+ height +'/' + width);
});
</script>
</html>
假設(shè),寬和高都是350,生成鏈接為http://jb51.net/350/350,訪問這個(gè)link就會(huì)得到一張350X350的可愛的小貓圖片~~O(∩_∩)O~~
然后,添加相應(yīng)的CSS即可
復(fù)制代碼
代碼如下:* {
padding: 0;
margin: 0;
}
#main {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
-moz-column-gap:20px;
-webkit-column-gap:20px;
column-gap:20px;
padding: 10px;
}
.box {
padding: 15px;
border: solid 2px #eeeeee;
border-radius: 4px;
margin-bottom: 15px;
cursor: pointer;
}
.box img {
width: 100%;
}
其中的 column-count 代表分成幾列,column-gap 代表列和列之間的寬度,你可以根據(jù)自己的需要調(diào)整。我們還可以使用 column-width 來定義列寬。
這樣就完成了,是不是很簡單~~
最后效果圖如下
相關(guān)文章
css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼
這篇文章主要介紹了css3 column實(shí)現(xiàn)卡片瀑布流布局的示例代碼的相關(guān)資料,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-22- 這篇文章主要介紹了用CSS3實(shí)現(xiàn)瀑布流布局的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-10
CSS3實(shí)現(xiàn)瀑布流布局與無限加載圖片相冊的實(shí)例代碼
本篇文章主要介紹了CSS3實(shí)現(xiàn)瀑布流布局與無限加載圖片相冊的實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-12-22- 這篇文章主要為大家詳細(xì)介紹了CSS3使用多列制作瀑布流的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-10
- 這篇文章主要介紹了css和js實(shí)現(xiàn)瀑布流效果示例,需要的朋友可以參考下2014-05-05
- css實(shí)現(xiàn)瀑布流空白處背景粉色背景塊,需要的朋友可以參考一下2013-02-22
詳解純css實(shí)現(xiàn)瀑布流(multi-column多列及flex布局)
這篇文章主要介紹了詳解純css實(shí)現(xiàn)瀑布流(multi-column多列及flex布局)的相關(guān)資料,用multi-column多列布局及flex布局實(shí)現(xiàn)瀑布流,感興趣的小伙伴們可以參考一下2018-09-04