css3實現的瀑布流佈局程式碼例項

antzone發表於2017-04-09
CSSS3

分享一段程式碼例項，它實現了瀑布流佈局效果。

程式碼是完全靜態的，這裡只是演示，瀑布流佈局是如何實現的。

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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>

其實瀑布流佈局非常的簡單，就是讓元素挨著排列，如果排不開就換行。

上面程式碼的核心是:

[CSS] 純文字檢視 複製程式碼
#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一章節。

相關文章