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#使用Redis实现网站统计访问数或点赞数功能！

    1.安装.net操作Redis需要的NuGet包: 这里推荐使用:StackExchange.Redis,在程序包管理器控制台输入命令install-package stackexchange.red ...

  2. Python笔记：装饰器

    装饰器        1.特点:装饰器的作用就是为已存在的对象添加额外的功能,特点在于不用改变原先的代码即可扩展功能: 2.使用:装饰器其实也是一个函数,加上@符号后放在另一个函数“头上”就实现了装饰 ...

  3. bugku——普通的二维码（进制转换）

    题目地址:http://ctf.bugku.com/files/5e480ecb178711e82bc847a208e15b32/misc80.zip 就一张二维码图片,用一些在线工具识别是乱码,用Q ...

  4. 剑指：求1+2+…+n

    题目描述 求 1+2+…+n,要求不能使用 乘除法.for.while.if.else.switch.case 等关键字及条件判断语句 A?B:C. 样例 输入:10 输出:55 解法 前面的和+后一 ...

  5. python中for循环里去修改列表注意的事项

    你的微信好友当中有 5 个推销的,他们存在一个列表 # black_list=['卖茶叶', '卖面膜', '卖保险', '卖花生', '卖手机'] # 当中, 请把这 5 个人分别从 black_l ...

  6. Oracle PLSQL游标、游标变量的使用

    参考文章:https://www.cnblogs.com/huyong/archive/2011/05/04/2036377.html 在 PL/SQL 程序中,对于处理多行记录的事务经常使用游标来实 ...

  7. Mysql-MariaDB设置延迟同步

    CHANGE MASTER TO MASTER_DELAY = N; N为秒数

  8. 160--Intersection Of Two Linked List

    public class IntersectionOfTwoLinkedList { /* 解法一:暴力遍历求交点. 时间复杂度:O(m*n) 空间复杂度:O(1) */ public ListNod ...

  9. rhel7 学习第二天

    参加<Linux就该这么学>在线培训的第二天,学习了虚拟环环境的搭建和红帽7的安装,同时也学习了rhel7的基本命令格式,以及systemctl的使用.

  10. 查询接口---flask+python+mysql

    环境准备 安装flask pip install  flask 项目结构如图 1.新建配置文件conf.py #!/usr/bin/python# -*- coding:utf-8 -*- impor ...