jQuery瀑布流插件masonry

项目要做荣誉证书的排版，宽度是统一的，但是高度不一致

采用瀑布流的效果来实现

默认先实现前15张，点击按钮再加载全部剩下的数据

效果图

 

 首先是html部分，写好样式

<!-- 荣誉资质 -->
  <div class="about_honor">
      ="container">
         h2>
              img src="/templates/img/honor_img1.png" />
              p>展望未来，我们满怀信心。xx网络的点滴进步均来源于广大客户的不断支持。</ul ="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 ="box wow fadeInUp" data-wow-delay=".1s"><="/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)){
            ?>
                ="box new-box"="/templates/images/honor/<?php echo $row2['honor_imgurl'];?>" >
            php
              }
            ?>
         
          ul="clearfix"></div="honor_loading">
             ="button--loading">
                 i>·>
             查看全部证书
          >    
  >

因为php很烂，所以直接把代码嵌里面了，哈哈哈

css部分大概这样

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

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

.button--loading{60px; 50px; #e37a40;}
.button--loading i {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) { 0.2s; 0.2s;}

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

@keyframes fadeInOut {
}

然后先引入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((){
        $container.masonry({
          itemSelector: '.box',获取每张图片的容器
          columnWidth: 1每两列之间的间隙为5像素
        });
      });

    隐藏15张以后的图
     $(".new-box").hide();
     图片容器高度设置
     $(".about_honor").css({
        "height":"1500px"
     });
     查看全部按钮定位
     $(".honor_loading").css({
        "position":"absolute","bottom":"59px"
     });
    
      点击查看全部
     $(".honor_loading").click(() {
          显示15张以后的图
          $(".new-box").slideToggle(1000);
          图片容器高度复原
          $(".about_honor").css({
            "height":""
         });
          查看全部按钮隐藏
         $(".honor_loading").hide();
     });

    });
  </script>

不太会代码封装，写的比较散啦~