CSS3代码column属性实现瀑布流效果

2017-08-04CSS1650
  • 详情内容
  • 留言反馈

CSS3中新出现的多列布局(multi-column)是传统HTML网页中块状布局模式的有力扩充。这种新语法能够让WEB开发人员轻松的让文本呈现多列显示,也就是人们常说的瀑布流式布局。在CSS3的多列布局(columns)语法功能出现之前,人们如果想让文本呈多列显示,要么使用绝对定位,手动给文本分段落,或者使用JS脚本插件等,而新语法的出现,彻底改变了这样的局面。

不管想让一段文本呈多少列显示,你需要的只是两个CSS3属性:column-count 和 column-width。column-count 属性设置列的具体个数,这将会使文本里的内容显示成两列(首先你的浏览器要支持这种新语法,比如火狐浏览器、谷歌浏览器,IE10+等)。column-width属性控制列的宽度。如果你没有定义column-count属性值,那么,浏览器就是自主决定将文本分成合适的列数。以下为实例代码:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS3代码column属性实现瀑布流效果</title>
<style type="text/css">
.container{
    -webkit-column-width:260px; /* Safari 和 Chrome */
    -moz-column-width:260px; /* Firefox */
      -webkit-column-gap:5px;/* Safari 和 Chrome */
      -moz-column-gap:5px;/* Firefox */
}
/*数据块 砖块*/
.container div{width:260px;margin:4px 0;}
</style>
</head>
<body>
    <div class="container">
        <div><img src="http://mpic.tiankong.com/3c6/cb2/3c6cb2a10d0ba3404f823d67156c285f/640.jpg" /></div>
        <div><img src="https://b-ssl.duitang.com/uploads/item/201410/26/20141026182438_dFPSH.thumb.700_0.jpeg" /></div>
        <div><img src="http://d.hiphotos.baidu.com/exp/w=480/sign=bac6d39e9a82d158bb8258b9b00b19d5/d788d43f8794a4c216d1b25b08f41bd5ac6e39cb.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112423.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112423-51.jpg" /></div>
        <div><img src="https://b-ssl.duitang.com/uploads/item/201411/23/20141123193323_tMB3e.thumb.700_0.jpeg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112424-50.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112425.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112425-51.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112425-52.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112426-50.jpg" /></div>
        <div><img src="http://www.6681.com/uploads/allimg/150801/37-150P1160259.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112426-51.jpg" /></div>
        <div><img src="http://d.hiphotos.baidu.com/exp/w=480/sign=bac6d39e9a82d158bb8258b9b00b19d5/d788d43f8794a4c216d1b25b08f41bd5ac6e39cb.jpg" /></div>
        <div><img src="https://b-ssl.duitang.com/uploads/item/201410/26/20141026182438_dFPSH.thumb.700_0.jpeg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112425-51.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112424-50.jpg" /></div>
        <div><img src="http://img.qt.baidu.com/hiapk_pic/old/150331/7730-150331112423.jpg" /></div>
        <div><img src="https://b-ssl.duitang.com/uploads/item/201411/23/20141123193323_tMB3e.thumb.700_0.jpeg" /></div>
    </div>
</body>
</html>

对于一些不支持多列布局特征的浏览器,比如IE9/IE8,会把这些属性全部忽略,这样布局就呈现出传统的单块布局。如果非要在这些浏览器中实现瀑布流布局效果,那就只能借助于JS插件了。

为了保证浏览器最大的兼容性,我们在使用多列布局属性时,最好添加浏览器引擎前缀,最基本的要加上三种:谷歌浏览器的-webkit-,火狐浏览器的-moz-,IE浏览器的-ms-,最后,别忘了不带前缀的写法。

CSS3的多列布局(columns)是一种方便WEB开发者高效利用宽屏显示器的非常有用的功能特征。你会发现在很多地方都需要用到它们,特别是需要自动平衡列高度的地方。


不来两句?也可以是问题反馈和建议

支持Ctrl+Enter提交
暂无留言,快抢沙发!
0

真心很赞,必须打赏!嗯,以资鼓励~

点此打赏

99%看过的人还会看