CSS3的学习--实现瀑布流

基于CSS3实现瀑布流,使用CSS3的CSS 多栏(Multi-column)。 

瀑布流,又称瀑布流式布局。是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。我们只是实现了多栏的布局。
CSS 多栏(Multi-column) :   

CSS3的学习--实现瀑布流  前端 css web 第1张

<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>
* {
	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 来定义列宽。

这样就完成了,是不是很简单。


原文链接:,转发请注明来源!
「CSS3的学习--实现瀑布流 」评论列表

发表评论