jQuery瀑布流插件masonry

項目要做榮譽證書的排版，寬度是統一的，但是高度不一致

採用瀑布流的效果來實現

預設先實現前15張，點擊按鈕再載入全部剩下的數據

效果圖

 首先是html部分，寫好樣式

<!-- 榮譽資質 -->
  <div class="about_honor">
      <div class="container">
         <h2>
              <img src="/templates/img/honor_img1.png" />
              <p>展望未來，我們滿懷信心。xx網路的點滴進步均來源於廣大客戶的不斷支持。</p>
         </h2>
         <ul class="box-container" id="main-box">
          <!-- 載入前15張圖片 -->
          <?php
              $info=mysqli_query($con,"SELECT * FROM `wit_honor` order by `order` limit 15"); 
              while($row=mysqli_fetch_array($info)){

          ?>
          <li class="box wow fadeInUp" data-wow-delay=".1s"><img src="/templates/images/honor/<?php echo $row['honor_imgurl'];?>" /></li>           
          <?php
              }
              //載入15張以後的全部圖片
              $info2=mysqli_query($con,"SELECT * FROM `wit_honor` order by `order` limit 15,30  "); 
              while($row2=mysqli_fetch_array($info2)){
            ?>
                <li class="box new-box"><img src="/templates/images/honor/<?php echo $row2['honor_imgurl'];?>" /></li>
            <?php
              }
            ?>
         
          </ul>
         <div class="clearfix"></div>
         <div class="honor_loading">
             <div class="button--loading">
                 <i>·</i>
                 <i>·</i>
                 <i>·</i>
             </div>
             查看全部證書
          </div>
      </div>    
  </div>

因為php很爛，所以直接把代碼嵌裡面了，哈哈哈

css部分大概這樣

/*榮譽資質*/
.about_honor{width:100%; float: left; position: relative; background: #2d323c; padding: 50px 0;}
.about_honor ul li{width:20%; float: left; text-align: center; padding-bottom: 15px; -webkit-flex: 1;flex: 1;}
.about_honor li img{border: 13px #ffff solid; width:85%;}
.about_honor h2{ text-align:center;}
.about_honor p{ font-size:18px; color: #fff; padding-bottom: 30px;}

.honor_loading {width:100px; text-align: center; margin:0 auto; font-size:16px; color: #fff; line-height: 35px;}
.honor_loading a {position: relative;display: block;color: #74777b;padding: 1em 1em 2.5em 1em;text-decoration: none;}
.honor_loading a:hover {text-decoration: none;color: #2cc185;background-color: #e7ecea;transition: 0.3s;}
.honor_more{z-index: 2;}

.button--loading{width:60px; line-height: 50px; margin:0 auto; background: #fff; color: #e37a40;}
.button--loading i { font-size:24px; font-weight: bold; font-style:normal;
    -webkit-animation: fadeInOut 0.3s ease-in infinite alternate forwards;
    animation: fadeInOut 0.3s ease-in infinite alternate forwards;}
.button--loading i:nth-child(2) {-webkit-animation-delay: 0.1s;animation-delay: 0.1s;}
.button--loading i:nth-child(3) {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}

@-webkit-keyframes fadeInOut {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeInOut {
    from {opacity: 0;}
    to {opacity: 1;}
}

然後先引入js

<script src="/templates/js/jquery-1.11.2.min.js"></script>
  <script type="text/javascript" src="/templates/js/jquery.masonry.min.js"></script>

再是實現效果的部分

  <script type="text/javascript">
    $(document).ready(function(){
      //這段是瀑布流插件的色值
      var $container = $('.box-container');//獲取總容器
      $container.imagesLoaded(function(){
        $container.masonry({
          itemSelector: '.box',//獲取每張圖片的容器
          columnWidth: 1//每兩列之間的間隙為5像素
        });
      });

    //隱藏15張以後的圖
     $(".new-box").hide();
     //圖片容器高度設置
     $(".about_honor").css({
        "height":"1500px"
     });
     //查看全部按鈕定位
     $(".honor_loading").css({
        "position":"absolute",
        "bottom":"59px",
        "left":"50%",
        "margin-left":"-30px"
     });
    
      //點擊查看全部
     $(".honor_loading").click(function() {
          //顯示15張以後的圖
          $(".new-box").slideToggle(1000);
          //圖片容器高度複原
          $(".about_honor").css({
            "height":""
         });
          //查看全部按鈕隱藏
         $(".honor_loading").hide();
     });

    });
  </script>

不太會代碼封裝，寫的比較散啦~