打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
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>

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

 

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
图片轮播效果代码(html)
一个好用的JQUERY API:slidy
瀑布流布局与 jQuery Ajax 分页 | Kayo's Melody
使用CSS3实现超炫的Loading(加载)动画效果
vuejs怎样封装一个插件(以封装vue-toast为例扩展)
loading动画特效
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服