Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计，感觉挺有个性的，比较合适做图片类型的网站，没事仿开心网做一个瀑布流示例。
需要用到Jquery，jquery.masonry.min.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="美女图片 - WWW.MN606.COM" />
<title>Masonry 瀑布流效果 - 美女图片</title>
<style type="text/css">
body{background:#eee;font-size:12px;font-family:"宋体";color:#333p;}
body,html,p,ul,li,dl,dt,dd,ol,h1,h2,h3,h4,h5{margin:0;padding:0;}
ul li{list-style:none;}
a{text-decoration: none;background-color: none}
a:hover{text-decoration: none;}
#page{ width:960px; margin:0 auto; }
#main{background:#FFF;height: 590px; float:left; width:960px;}
.item{ border:1px solid #EEE;float: left;display: inline;padding: 10px;margin: 10px 0px 0 14px;position: relative;}
.item img{border: none;}
</style>
</head>
<!--
《瀑布流效果》
作者：Swiing -->
<body>
<div id="page">
<div id="main">
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820573960309.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701021504380.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/11/200_200/2012071100572176412.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820231163974.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701004194456.jpg" /></a>
</div> <div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820190205402.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/11/200_200/2012071100572176412.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820573960309.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820501119382.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701021504380.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820231163974.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701004194456.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820501119382.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820190205402.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/11/200_200/2012071100572176412.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820573960309.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701021504380.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820231163974.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/17/200_200/2012071701004194456.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820501119382.jpg" /></a>
</div>
<div class="item">
<a href="http://www.mn606.com/">
<img src="http://image.mn606.com/images/2012/07/18/200_200/2012071820190205402.jpg" /></a>
</div>
</div>
</div>
</body>
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script>
$(function(){
var $container = $('#main');
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.item'
});
});
});
</script>
</html>
Jquery简单瀑布流代码示例的更多相关文章
- jquery实现简单瀑布流代码
测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...
- 网友微笑分享原创Jquery实现瀑布流特效
首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...
- 用jQuery实现瀑布流效果学习笔记
jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...
- 用JavaScript和jQuery实现瀑布流
▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...
- 【前端】用jQuery实现瀑布流效果
jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...
- iOS之简单瀑布流的实现
iOS之简单瀑布流的实现 前言 超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里. 实现思路 collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie ...
- 基于jQuery表格增加删除代码示例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现简单瀑布流
瀑布流这个概念一直不是很理解,看到别人可以实现,自己弄了很久还是不能实现就很纠结.瀑布流这根刺就一直扎在我心里,一次偶然的机会看到别人实现了瀑布流,我想我是不是也应该再继续把这个未完成的任务画一个圆满 ...
- jquery版瀑布流
一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...
随机推荐
- segmentfault.com mongo出识以及对数组的操作
https://segmentfault.com/a/1190000003951602 首先推荐个工具,no-sql-manager-for-mongodb-professional,虽然收费,但是每 ...
- CSS-混合布局的几种方法（正确的方法和错误的原因）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 利用WSCF进行契约先行的Web Services开发
http://www.cnblogs.com/goody9807/archive/2007/06/05/772107.html 什么是契约先行(Contract-First)? 如果说一个新的软件开发 ...
- easyUI的控件
CSS类定义: div easyui-window window窗口样式 属性如下: 1) modal:是否生成模态窗口.tru ...
- StringBuilder 和 StringBuffer
这两者唯一的不同就在于,StringBuffer是线程安全的,而StringBuilder不是.当然线程安全是有成本的,影响性能,而字符串对象及操作,大部分情况下,没有线程安全的问题,适合使用Stri ...
- DS18B20函数库建立实验
1.主代码: /* 温度传感器 */#include "DS18B20.h"#include"def.h"u16 get_temp (void){ fl ...
- Windows7-32bit系统安装MySQL-5.5.39-win32.msi服务图解
下载mysql-5.5.39-win32.msi安装文件,双击运行,出现如下界面. mysql安装向导启动,按“Next”继续 在 I accept the terms in the License ...
- 才知道创建数据表的后面int(M)的m居然和存储大小没有关系
之前一直以为,后面m代表有几个字节 MySQL 数据类型中的 integer types 有点奇怪.你可能会见到诸如:int(3).int(4).int(8) 之类的 int 数据类型.刚接触 MyS ...
- 最大似然估计 （MLE） 最大后验概率（MAP）
1) 最大似然估计 MLE 给定一堆数据,假如我们知道它是从某一种分布中随机取出来的,可是我们并不知道这个分布具体的参,即"模型已定,参数未知". 例如,我们知道这个分布是正态分布 ...
- Java数据结构——双向链表
//================================================= // File Name : DoublyLinked_demo //------------- ...