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. 安全漏洞系列（二）---站点信息侦测（C# MVC）

    参考地址:https://jingyan.baidu.com/article/77b8dc7fa657c26174eab631.html 概述:站点信息侦测漏洞会检测到用的版本信息等,然后借此进行一些 ...

  2. 项目中使用Redis的游标scan的一些小问题

    最近项目中有一个需求就是在下拉中要筛选车辆列表,本来想着是在内存中全部用程序去遍历处理,但发现数据有点多,一个个去处理会有点慢.然后就找到了redis的游标 感觉这个能满足我的需求,我可以把key存成 ...

  3. QQ互联，填写回调时注意事项

    今天在做QQ登录接口的时候,填写回调地址的时候,竟然出现了诡异的事情. 我的回调地址我直接填的域名,也申请通过了.但是在做开发地时候,一直提示这蛋疼的  redirect uri is illegal ...

  4. 获取post传输参数

    1.获取post参数可以用 传输参数为 a=aa&b=bb这种 public static SortedDictionary<string, string> GetRequestP ...

  5. QT多线程中使用QTcpSocket遇到的读写数据问题

    多线程中使用QTcpSocket在run()方法中new QTcpSocket;然后监听readyRead()信号connect(m_pTcpSocket,SIGNAL(readyRead()),th ...

  6. iOS相关

    1. fastlane a collection of tools that help you automate building and releasing iOS and Android apps ...

  7. MySql定时备份脚本

    最近需要对某服务的数据库数据进行备份,因此参考网上教程完成数据库备份脚本. 因为服务的使用频率较低,因此设置定时任务,在每天的中午以及午夜时分进行备份操作. #!/bin/bash # 设置mysql ...

  8. nginx之旅(第二篇):nginx日志管理、nginx防盗链、nginx虚拟主机

    一.nginx日志管理 Nginx访问日志主要有两个参数控制 1) log_format #用来定义记录日志的格式(可以定义多种日志格式,取不不同名字即可) log_format log_name s ...

  9. LDA-作为线性判别 分类器 推导

    LDA, 即 Linear Discriminant Analysis, 中文翻译为, 线性判别分析. 比较有趣的一点是:LDA 既可以直接用作分类算法, 也可作为特征降维的方法. 给人感觉, 这是将 ...

  10. flask Gunicorn和uwsgi并发对比（转载）

    转载 结果 吞吐量(要求/秒) 响应时间(毫秒) 失误 吞吐量的标准偏差(要求/秒) 尽管uWSGI的性能在高负载下确实有些不稳定,但它看起来像Python应用服务器.uWSGI不仅速度快得离谱,而且 ...