瀑布式文章系统

css实现瀑布式布局,流式布局。


html:

<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id="container">
	
</div>



<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

<div class="wrapper">
  <div class="block">
      <img src="http://placehold.it/350x150">
      <div class="content">
        <h2>Gbtags</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor.</p>
        <a href="#" class="read-more">Read More</a>
      </div>
  </div>
  <div class="block">
    <img src="http://placehold.it/350x220">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
        <a href="#" class="read-more">Read More</a>
      </div>
  </div>
  <div class="block">
    <img src="http://placehold.it/350x300">
    <div class="content">
      <h2>Gbtags</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem.</p>
        <a href="#" class="read-more">Read More</a>
      </div>
  </div>
  <div class="block">
    <img src="http://placehold.it/350x120">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor...</p>
        <a href="#" class="read-more">Read More</a>
      </div>
  </div>
  <div class="block">
    <img src="http://placehold.it/350x100">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </div>
  </div>
  
  <div class="block">
    <img src="http://placehold.it/350x230">
    <div class="content">
      <h2>A little longer Title</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
        <a href="#" class="read-more">Read More</a>
      </div>  
  </div>
  <div class="block">
    <img src="http://placehold.it/350x150">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor.</p>
      </div>
  </div>
  <div class="block">
    <img src="http://placehold.it/350x300">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue.</p>
        <a href="#" class="read-more">Read More</a>
      </div>
  </div>
  <div class="block">
    <img src="http://placehold.it/350x100">
    <div class="content">
      <h2>Geek</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue. Nam maximus enim tortor. Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
        <a href="#" class="read-more">Read More</a>
      </div>
  </div>
  <div class="block">
    <img src="http://placehold.it/350x350">
    <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ante lorem, interdum a pulvinar in, ultrices mattis augue.</p>
      </div>
  </div>
</div>

css:

body {
  background: crimson;
  font-family: "Lora";
  color: #444;
  line-height: 145%;
  font-size: 1.125rem;
}

h2 {
  font-family: "Lato";
  font-size: 1.5rem;
}

a {
  color: #960e29;
}

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: column wrap;
  -moz-flex-flow: column wrap;
  flex-flow: column wrap;
  -webkit-align-content: space-between;
  -moz-align-content: space-between;
  align-content: space-between;
  -ms-flex-line-pack: justify;
  height: 2000px;
  padding: 30px;
}
.wrapper .block {
  width: 31.5%;
  margin: 0 0 30px 0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.wrapper .block img {
  width: 100%;
  display: block;
}
.wrapper .block .content {
  display: block;
  margin: 0;
  padding: 5px 15px 15px 15px;
  background: #f8f8f8;
}
相关文章
相关标签/搜索