css3实现的瀑布流布局代码实例

快乐打工仔 分类:实例代码

分享一段代码实例,它实现了瀑布流布局效果。

代码是完全静态的,这里只是演示,瀑布流布局是如何实现的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#wrap {
  position: relative;
  margin: 0px auto;
  -webkit-column-width: 250px;
}
#wrap li {
  width: 250px;
  display: inline-block;
  list-style: none;
}
.boxCont {
  position: relative;
  margin: 15px;
  border: 1px solid #ccc;
  background: #eee;
  background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  -webkit-border-radius: 60px / 5px;
  -moz-border-radius: 60px / 5px;
  border-radius: 60px / 5px;
  -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
  -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
}
.boxCont:before {
  content: '';
  width: 50px;
  height: 50px;
  top: 0;
  right: 0;
  position: absolute;
  display: inline-block;
  z-index: -1;
  -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
}
.boxCont:after {
  content: '';
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  position: absolute;
  z-index: -1;
  display: inline-block;
  -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  transform: rotate(2deg) translate(20px,25px) skew(20deg);
}
</style>
</head>
<body>
<ul id="wrap">
  <li>
    <div class="boxCont" style="height:255px;"></div>
  </li>
  <li>
    <div class="boxCont" style="height:306px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:317px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:388px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:346px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:272px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:337px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:257px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:339px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:306px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:350px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:239px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:246px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:270px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:331px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:270px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:232px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:284px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:335px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:245px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:265px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:354px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:255px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:362px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:310px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:272px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:378px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:221px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:236px;"></div>
    </li>
    <li>
      <div class="boxCont" style="height:373px;"></div>
    </li>
  </ul>
</body>
</html>

其实瀑布流布局非常的简单,就是让元素挨着排列,如果排不开就换行。

上面代码的核心是:

#wrap {
  position: relative;
  margin: 0px auto;
  -webkit-column-width: 250px;
}
#wrap li {
  width: 250px;
  display: inline-block;
  list-style: none;
}

更多内容可以参阅相关阅读:column-width可以参阅CSS3 column-width一章节。

css3实现的瀑布流布局代码实例

回复

我来回复
  • 暂无回复内容