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. Vue递归组件实现层层嵌套显示数据

    问题来自朋友...记录一下 需求是表格头部后端返回的数据中是不确定的 n维数据,表头存在于 listVo 字段中,如何实现层层显示呢? 温馨提示,以下内容为5张大图,请打开 WIFI 享用... 以下 ...

  2. proxychains4配置使用

    一丶安装 sudo apt-get install proxychains4 二丶修改配置文件 sudo vim /etc/proxychains.conf 在文本最后加上你的代理服务器地址,如果有用 ...

  3. 学点经济学：M0、M1、M2、M3，傻傻分不清？（转载）

    来源:http://t.10jqka.com.cn/pid_97006727.shtml 学点经济学:M0.M1.M2.M3,傻傻分不清? 25,508人浏览 2018-08-03 11:06 常听人 ...

  4. FTP服务搭建配置笔记

    1.什么是文件共享服务? 简单来说就是文件域存储块设备可以共享给他人使用. 1.1 实现文件共享服务的三种方式 FTP:属于应用层服务,可以跨平台使用 NFS:属于内核模式,不可以跨平台使用 Samb ...

  5. django2外键,F表达式,Q表达式

    一对多 环境 两个类:书的类别和文章,一片文章只能有一个作者,一个作者可以有多个文章,这之间组成了一对多的关系 class Category(models.Model): category = mod ...

  6. 使用mysql数据库过程中常用的命令

    1.添加用户:GRANT USAGE ON . TO 'user01'@'localhost' IDENTIFIED BY '123456' WITH GRANT OPTION; 2.列出mysql数 ...

  7. Centos6.5 下安装 tmux（免编译）

    环境:Centos6.5是新安装的,没有安装过其它的软件包.思路是安装epel的源后再安装tmux. yum install epel-release # 安装Linux的 epel 的yum源 yu ...

  8. 201671030113 李星宇 实验十四 团队项目评审&课程学习总结

    项目 内容 所属课程 [所属课程(https://www.cnblogs.com/nwnu-daizh/) 作业要求 作业要求 课程学习目标 (1)掌握软件项目评审会流程:(2)反思总结课程学习内容 ...

  9. 搭建自己的docker镜像

    手动构建 1.关键字查找镜像 sudo docker search centos 2.下载基本镜像 sudo docker pull centos 3.启动容器 sudo docker run -d ...

  10. 【java】new Date什么样

    Thu Nov 21 10:39:40 GMT+08:00 2019 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31).getDay() 从 Date 对象返回一周中的某一 ...