CSS3的学习--实现瀑布流
生活随笔
收集整理的這篇文章主要介紹了
CSS3的学习--实现瀑布流
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
基于CSS3實現瀑布流，使用CSS3的CSS 多欄(Multi-column)。
可以到github上下載源碼 :?https://github.com/CraryPrimitiveMan/waterfall-css3
瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。我們只是實現了多欄的布局。
CSS 多欄(Multi-column) :?http://www.w3chtml.com/css3/properties/multi-column/
?
| columns | CSS3 | 無 | CSS3 columns 屬性，是復合屬性，設置或檢索對象的列數和每列的寬度。 |
| column-width | CSS3 | 無 | CSS3 column-width 屬性，設置或檢索對象每列的寬度 |
| column-count | CSS3 | 無 | CSS3 column-count 屬性，設置或檢索對象的列數 |
| column-gap | CSS3 | 無 | CSS3 column-gap 屬性，設置或檢索對象的列與列之間的間隙 |
| column-rule | CSS3 | 無 | CSS3 column-rule 屬性，是復合屬性。設置或檢索對象的列與列之間的邊框。 |
| column-rule-width | CSS3 | 無 | CSS3 column-rule-width 屬性，設置或檢索對象的列與列之間的邊框厚度。 |
| column-rule-style | CSS3 | 無 | CSS3 column-rule-style 屬性，設置或檢索對象的列與列之間的邊框樣式。 |
| column-rule-color | CSS3 | 無 | CSS3 column-rule-color 屬性，設置或檢索對象的列與列之間的邊框顏色。 |
| column-span | CSS3 | 無 | CSS3 column-span 屬性，設置或檢索對象元素是否橫跨所有列。 |
| column-fill | CSS3 | 無 | CSS3 column-fill 屬性，設置或檢索對象所有列的高度是否統一。 |
| column-break-before | CSS3 | 無 | CSS3 column-break-before 屬性，設置或檢索對象之前是否斷行。 |
| column-break-after | CSS3 | 無 | CSS3 column-break-after 屬性，設置或檢索對象之后是否斷行。 |
| column-break-inside | CSS3 | 無 | CSS3 column-break-inside 屬性，設置或檢索對象內部是否斷行。 |
?
?
?
?
?
?
?
?
?
?
?
?
?
?
先來寫一個簡單的圖片頁面
<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><!-- 這里省略多個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(){// 隨機圖片的高寬，如果大小一樣，就沒必要用瀑布流了 width = Math.floor(Math.random() * 100) + 300;height = Math.floor(Math.random() * 500) + 300;$(this).attr('src', 'http://placekitten.com/'+ height +'/' + width);});</script> </html>假設，寬和高都是350，生成鏈接為http://placekitten.com/350/350，訪問這個link就會得到一張350X350的可愛的小貓圖片~~O(∩_∩)O~~
然后，添加相應的CSS即可
* {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 代表列和列之間的寬度，你可以根據自己的需要調整。我們還可以使用?column-width 來定義列寬。
這樣就完成了，是不是很簡單~~
最后效果圖如下
轉載于:https://www.cnblogs.com/CraryPrimitiveMan/p/3777033.html
總結
以上是生活随笔為你收集整理的CSS3的学习--实现瀑布流的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： atitit.软件开发方法总结O6
- 下一篇： SQL 创建索引的作用以及如何创建索引