jquery插件实现瀑布流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.container-fluid {
padding: 20px;
}
.box {
margin-bottom: 20px;
float: left;
width:400px;
}
.box img {
width:100%;
}
</style>
<body>
<div id="masonry" class="container-fluid">
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/5840871504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/6829101504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/3246161504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/3458731504671934.jpg"></div>
<div class="box"><img src="http://wxserver.knowway.cn/upload/yingjiatoupiao/chenliezhaopian/suoluetu/8541471504671894.jpg"></div>
...
</div>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="{$yuming}/js/masonry-docs.min.js"></script>
<script>
$(function() {
var $container = $('#masonry');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
gutter: 20,
isAnimated: true,
});
});
});
</script>
</body>
</html>

jquery插件实现瀑布流的更多相关文章

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

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

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

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

  3. jQuery无限载入瀑布流 【转载】

    转载至 http://wuyuans.com/2013/08/jquery-masonry-infinite-scroll/ jQuery无限载入瀑布流 好久没更新日志了,一来我比较懒,二来最近也比较 ...

  4. jQuery插件实现瀑布留布局masonry + infinitescroll 图片高度处理

    jQuery插件实现瀑布留布局masonry + infinitescroll . 使用官方的示例代码实际测试发现,当上传到服务器的时候,由于图片下载速度问题,导致图片高度不能被正确识别,从而造成层的 ...

  5. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Jquery实现图片瀑布流思路-简单版

    目录 Jquery实现图片瀑布流思路-简单版 1.预备 2.开始 1.声明 2.主体 3.窗体大小改变事件 Jquery实现图片瀑布流思路-简单版 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特 ...

  7. 用 jQuery Masonry 插件创建瀑布流式的页面(转)

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  8. 用 jQuery Masonry 插件创建瀑布流式的页面

    瀑布流式的页面,最早我是在国外的一个叫 Pinterest 的网站上看到,这个网站爆发,后来国内的很多网站也使用了这种瀑布流方式来展示页面(我不太喜欢瀑布流这个名字). 我们可以使用 jQuery 的 ...

  9. （转）15个非常棒的jQuery无限滚动插件【瀑布流效果】

    原文地址:http://www.cnblogs.com/lyw0301/archive/2013/06/19/3145084.html 现在,最热门的网站分页趋势之一是jQuery的无限滚动(也即瀑布 ...

随机推荐

  1. springboot启动报错,Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled.

    报错: Error starting ApplicationContext. To display the conditions report re-run your application with ...

  2. 用node发布一个包

    手把手教你用npm发布一个包 注:本文引用于简书 http://www.jianshu.com/p/36d3e0e00157   但是内容的话,还是一样的,也就是继续之前的工作,将那个autoRout ...

  3. Sharding-Jdbc概念与使用技巧

    1. Sharding-Jdbc概念与使用技巧 此讲解版本为4.0.0-RC1,目前最新的版本 2019年5月21日发布 1.1. 绑定表 指分片规则一致的主表和子表.例如:t_order表和t_or ...

  4. c#打开颜色对话框

    用button时间 调出颜色对话框来: private void btnForeColor_Click(object sender, EventArgs e)        {            ...

  5. MySQL数据物理备份之tar打包备份

    复制数据文件方式,可以使用cp或tar 1.停止服务 [root@localhost mysql]# systemctl stop mysqld [root@localhost mysql]# net ...

  6. [TJOI2015]弦论（后缀自动机）

    传送门 题意: 对给定字符串\(s\),求其第\(k\)小子串,重复串被计入以及不被计入这两种情况都需考虑. 思路: 首先构建后缀自动机,之后就考虑在后缀自动机上\(dp\). 我们知道如果要考虑重复 ...

  7. python网页内容提取神器lxml

    一.Xpath是什么 XPath 是一门在 XML 文档中查找信息的语言.XPath 用于在 XML 文档中通过元素和属性进行导航. XPath 使用路径表达式在 XML 文档中进行导航 XPath ...

  8. centos7.7离线安装nginx

    一.1.安装openssl,因为编译安装nginx需要指定openssl目录 mkdir /data/openssl -p cd /data/openssl wget https://www.open ...

  9. .Net反射在项目中的应用

    案例1:项目中可能有多个DAL程序集,每个程序集使用不同的持久化技术或对应不同类型的数据库,但是它们使用同一套接口. 可以在配置文件中配置DAL程序集名称,使用反射加载程序集.创建dal对象. 这样做 ...

  10. VS 代码过长自动换行

    然后就需要设置自动换行.在VS上面的菜单栏中,选择 工具=>选项,出现选项对话框.   在对话框中,展开“文本编辑器”,然后选中“C#”,勾选右边的“自动换行“.   点击确定按钮.这样就可以看 ...