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

采用瀑布流的效果来实现

默认先实现前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:;flex:;}
.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:;} .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:;}
to {opacity:;}
} @keyframes fadeInOut {
from {opacity:;}
to {opacity:;}
}

然后先引入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>

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

jQuery瀑布流插件masonry的更多相关文章

  1. jQuery瀑布流插件 Masonry

    http://www.jq22.com/yanshi362 参考案例 http://image.quanjing.com/lvyou/

  2. jQuery动态网格瀑布流插件Masonry

    Masonry是一款非常强大的jQuery动态网格布局插件,可以帮助开发人员快速开发瀑布流界面效果.和CSS中float的效果不太一样的地方在于,float先水平排列,然后再垂直排列,使用Masonr ...

  3. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  4. jQuery瀑布流插件——jQuery.Waterfall

    插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计 ...

  5. jQuery 瀑布流插件: Wookmark

    原文链接: jQuery Wookmark 在线示例: jQuery Wookmark Demo Wookmark官网: http://www.wookmark.com/jquery-plugin 翻 ...

  6. 瀑布流插件(jquery.masonry.js)

    什么是瀑布流?去看看Pinterest(这才是鼻祖),Mark之,蘑菇街,点点网,还有腾讯的微博广场吧.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部. Masonry是一款很好用的jqu ...

  7. jquery.masonry瀑布流插件的4个使用步骤

    1.分别加载jquery插件与jquery.masonry插件两个文件 下载jquery插件:http://jquery.com也可以引用google的cdn外部jquery核心库JS文件下载jque ...

  8. 瀑布流插件|jquery.masonry|使用demo

    Maonsry+Infinite-Scroll实现滚动式分页,网上有很多,这里只说: 瀑布流插件的一个基本使用,附上基本功能的demo <html> <head> <me ...

  9. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

随机推荐

  1. VMware 虚拟机开机黑屏

    先记录一下害我差点点就又跑去重装了 好几天未打开vm 打开就黑屏 打开虚拟机就是黑屏没反应 找了很久(好像是wegame的原因,昨晚上好像是打开了wegame更新2k和lol) 1献上解决方案 管理员 ...

  2. python接口自动化测试 - configparser配置文件解析器详细使用

    configparser简介 ConfigParser模块已在Python 3中重命名为configparser 该模块定义了ConfigParser类. ConfigParser类实现一种基本的配置 ...

  3. c#数字图像处理(十一)图像旋转

    如果平面上的点绕原点逆时针旋转θº,则其坐标变换公式为: x'=xcosθ+ysinθ   y=-xsinθ+ycosθ 其中,(x, y)为原图坐标,(x’, y’)为旋转后的坐标.它的逆变换公式为 ...

  4. Python学习,第六课 - 集合

    Python中集合的相关操作 集合是一个无序的,不重复的数据组合 它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 list_1 =set ...

  5. jenkins 集成jmeter-简单篇

    测试用例上传至gitlab后,使用jenkins集成gitlab,并执行压测命令 执行完成后,可在jenkins中查看压测报告不同的项目创建最好创建不同的project) [集成]安装&配置& ...

  6. [CCPC2019 ONLINE]E huntian oy

    题意 http://acm.hdu.edu.cn/showproblem.php?pid=6706 思考 打表出奇迹. 注意到这个式子有一大堆强条件限制,最后化为: $$\frac{1}{2}\sum ...

  7. idea中使用Live Template自动生成方法所有参数打印

    一 新建模板 二 设置代码模板 三 设置变量 表达式是支持groovy脚本的,所以这里写一个groovy脚本,生成给定格式的日志字符串,methodParameters()是idea内置的函数,获取方 ...

  8. 十五 awk文本处理

    Awk 语法和基础命令 以行为处理单位 对数据进行逐行处理 处理完当前行,把当前行的处理结果输出后自动对下一行进行处理 直到文件中所有行处理完为止 创造者:Aho.Weinberger.Kernigh ...

  9. 什么是伪静态,以及ubuntu + apache 如何实现伪静态

    原文链接:http://www.cnblogs.com/ainiaa/archive/2010/07/25/1784564.html php伪静态 一直在做php的开发工作.在开发的过程中老早就听说了 ...

  10. WSGI接口

    web server gateway interface:将http请求,响应格式封装起来,让我们可以专心的用python编写web业务. WSGI接口定义的非常简单,它只要求开发者实现一个函数,就可 ...