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. Linux组管理(6)

    在linux中每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念. 文件/目录的所有者:一般为文件的创建者,谁创建了该文件,就自然成为该文件的所有者 查看文件 ...

  2. 设计模式之（十一）代理模式（Proxy）

    软件开发行业有一个观点:任务问题都可以添加一个中间层来解决.代理模式也是这个思想下的产物. 首先看下代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问.就是把类委托给另外一个类,用这个类来控 ...

  3. QT绘制B样条曲线

    ²  贝塞尔曲线 贝塞尔曲线是通过一组多边折线的各顶点来定义.在各顶点中,曲线经过第一点和最后一点,其余各点则定义曲线的导数.阶次和形状.第一条和最后一条则表示曲线起点和终点的切线方向. ²  B样条 ...

  4. (转)牛牛牌型判定(五小牛 > 五花牛 > 炸弹 > 银牛 > 牛牛 > 有牛>没牛)

    牌型大小: 五小牛 > 五花牛 > 炸弹 > 银牛 > 牛牛 > 有牛(牛987654321) > 没牛,K > Q > J ……2 > A, 黑 ...

  5. 易语言网页登录 POST

    使用精易模块 打开网页登录窗口 抓取数据 输入用户名密码,抓包 保存抓到的数据 包含post地址和数据信息 易语言代码 解决乱码

  6. Markdown随笔

    Markdown随笔 这两天兴致来了,想尝试一下使用 Markdown. 写这篇博客时我用的是: MarkdownPad 2 关于 MarkdownPad 2 的安装破解网上有很多教程了,这里我就不赘 ...

  7. mysql中的where和having的区别

    下面以一个例子来具体的讲解: 1. where和having都可以使用的场景 1)select addtime,name from dw_users where addtime> 1500000 ...

  8. ant笔记

    目录 ant远程部署 ant的使用,命令! 参考文献: ant+maven一键打包springboot上传服务器发布 判断linux文件.文件夹是否存在 shell中脚本参数传递的两种方式 shell ...

  9. Centos6.5硬盘故障修复

    以企业Centos6.5Linux为案例来修复系统,步骤如下: (1)远程备份本地其他重要数据,出现只读文件系统,需要先备份其他重要数据基于rsync|scp远程备份,其中/data为源目录,/dat ...

  10. PHP中md5()函数绕过

    PHP md5()函数的简单绕过方法,该篇作为学习笔记简单记录一下.   例题   例题链接: http://ctf5.shiyanbar.com/web/houtai/ffifdyop.php   ...