欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

怎么用CSS3實現(xiàn)css多蘭瀑布流效果

本篇內(nèi)容介紹了“怎么用CSS3實現(xiàn)css多蘭瀑布流效果”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

目前成都創(chuàng)新互聯(lián)已為上1000+的企業(yè)提供了網(wǎng)站建設、域名、虛擬空間、網(wǎng)站運營、企業(yè)網(wǎng)站設計、易門網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

CSS 多欄(Multi-column) : http://www.w3chtml.com/css3/properties/multi-column/

Properties
屬性		CSS Version
版本		Inherit From Parent
繼承性		Description
簡介
columnsCSS3無CSS3 columns 屬性，是復合屬性，設置或檢索對象的列數(shù)和每列的寬度。
column-widthCSS3無CSS3 column-width 屬性，設置或檢索對象每列的寬度
column-countCSS3無CSS3 column-count 屬性，設置或檢索對象的列數(shù)
column-gapCSS3無CSS3 column-gap 屬性，設置或檢索對象的列與列之間的間隙
column-ruleCSS3無CSS3 column-rule 屬性，是復合屬性。設置或檢索對象的列與列之間的邊框。
column-rule-widthCSS3無CSS3 column-rule-width 屬性，設置或檢索對象的列與列之間的邊框厚度。
column-rule-styleCSS3無CSS3 column-rule-style 屬性，設置或檢索對象的列與列之間的邊框樣式。
column-rule-colorCSS3無CSS3 column-rule-color 屬性，設置或檢索對象的列與列之間的邊框顏色。
column-spanCSS3無CSS3 column-span 屬性，設置或檢索對象元素是否橫跨所有列。
column-fillCSS3無CSS3 column-fill 屬性，設置或檢索對象所有列的高度是否統(tǒng)一。
column-break-beforeCSS3無CSS3 column-break-before 屬性，設置或檢索對象之前是否斷行。
column-break-afterCSS3無CSS3 column-break-after 屬性，設置或檢索對象之后是否斷行。
column-break-insideCSS3無CSS3 column-break-inside 屬性，設置或檢索對象內(nèi)部是否斷行。

先來寫一個簡單的圖片頁面

代碼如下:


<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://jb51.net/'+ height +'/' + width);
       });
   </script>
</html>

假設，寬和高都是350，生成鏈接為http://jb51.net/350/350，訪問這個link就會得到一張350X350的可愛的小貓圖片~~O(&cap;_&cap;)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 代表列和列之間的寬度，你可以根據(jù)自己的需要調(diào)整。我們還可以使用 column-width 來定義列寬。

這樣就完成了，是不是很簡單~~

最后效果圖如下

怎么用CSS3實現(xiàn)css多蘭瀑布流效果

“怎么用CSS3實現(xiàn)css多蘭瀑布流效果”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！

當前文章：怎么用CSS3實現(xiàn)css多蘭瀑布流效果
轉(zhuǎn)載來于：http://chinadenli.net/article22/giscjc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、App開發(fā)、服務器托管、ChatGPT、小程序開發(fā)、移動網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設