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代码 & ...
随机推荐
- Beta版本——第五次冲刺博客
我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 03140241 王婷婷 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬 ...
- 超强语感训练文章(Provided by Rocky teacher Prince)
Content: Class1 My name is Prince Class2 Welcome to our hotel Class3 We’re not afraid of problems Cl ...
- edmx代码分析
http://www.cnblogs.com/FoundationSoft/archive/2011/01/08/1930479.html 本文分析Entity Framework从数据库自动生成的模 ...
- [EmguCV|WinForm] 使用EmguCV內建直方圖工具繪製直方圖(Histogram)－直方圖(Histogram)系列 (1)
https://dotblogs.com.tw/v6610688/archive/2013/12/20/emgucv_draw_histogram_histogrambox_histogramview ...
- Hook技术
hook钩子: 使用技术手段在运行时动态的将额外代码依附现进程,从而实现替换现有处理逻辑或插入额外功能的目的. 它的技术实现要点有两个: 1)如何注入代码(如何将额外代码依附于现有代码中). 2)如何 ...
- break; continue; goto; return在循环中的应用
1. break表示跳出循环,程序指向循环体后的第一条语句: ; ) { ) break; console.writeline("{0}",i++); } console.read ...
- MFC学习-第2,3课 MFC框架的运行机制
转自:http://blog.163.com/zhigang0633@126/blog/static/38790491200822711526168/ 讲述MFC AppWizard的原理与MFC程序 ...
- mvn添加本地jar
mvn install:install-file -DgroupId=com.oracle "-DartifactId=ojdbc6" "-Dversion=11.2.0 ...
- 知乎布局||offsetTop||侧边栏自动等高
1.对a标签的详细介绍 直接在a标签使用onclick,怎么去除a的默认链接,onclick="return test()" 注意这里的return 不可舍去,test函数可以直接 ...
- git add
一.前言git add命令主要用于把我们要提交的文件的信息添加到索引库中.当我们使用git commit时,git将依据索引库中的内容来进行文件的提交. 二.基本git add <path> ...