根据CSS3的CSS 多栏(Multi

日期:2020-09-22 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

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

Properties
特性 CSS Version
版本号 Inherit From Parent
承继性 Description
简介 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 特性,设定或查找目标全部列的高宽比是不是统1。 column-break-before CSS3 无 CSS3 column-break-before 特性,设定或查找目标以前是不是断行。 column-break-after CSS3 无 CSS3 column-break-after 特性,设定或查找目标以后是不是断行。 column-break-inside CSS3 无 CSS3 column-break-inside 特性,设定或查找目标內部是不是断行。

先来写1个简易的照片网页页面


拷贝编码
编码以下:

<html>
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="../lib/jquery/jquery⑴.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(){
// 任意照片的高宽,假如尺寸1样,就没必要用瀑布流了
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就会获得1张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 来界定列宽。

这样就进行了,是否很简易~~

最终实际效果图以下