最近很多网站都采用瀑布流风格设计，感觉挺有个性的，比较合适做图片类型的网站，没事仿开心网做一个瀑布流示例。

需要用到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简单瀑布流代码示例的更多相关文章

  1. jquery实现简单瀑布流代码

    测试环境:ie8 ff13.0.1  chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...

  2. 网友微笑分享原创Jquery实现瀑布流特效

    首先非常感谢网友微笑的无私分享,此Jquery特效是一款非常流行和实用的瀑布流布局,核心代码只有几十行,是我见过代码量最少的瀑布流布局,非常适合网友们学习哦,希望大家好好看一下这个Jquery特效的原 ...

  3. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  4. 用JavaScript和jQuery实现瀑布流

    ▓▓▓▓▓▓ 大致介绍 在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记 ▓▓▓▓▓▓ 用JavaScript实现 基本结构: <div id="main" ...

  5. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  6. iOS之简单瀑布流的实现

    iOS之简单瀑布流的实现   前言 超简单的瀑布流实现,这里说一下笔者的思路,详细代码在这里. 实现思路 collectionView能实现各中吊炸天的布局,其精髓就在于UICollectionVie ...

  7. 基于jQuery表格增加删除代码示例

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. jquery实现简单瀑布流

    瀑布流这个概念一直不是很理解,看到别人可以实现,自己弄了很久还是不能实现就很纠结.瀑布流这根刺就一直扎在我心里,一次偶然的机会看到别人实现了瀑布流,我想我是不是也应该再继续把这个未完成的任务画一个圆满 ...

  9. jquery版瀑布流

    一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...

随机推荐

  1. 全栈必备 Linux 基础

    Linux 几乎无处不在,不论是服务器构建,还是客户端开发,操作系统的基础技能对全栈来说都是必备的.系统的选择Linux发行版本可以大体分为两类,一类是商业公司维护的发行版本,一类是社区组织维护的发行 ...

  2. 使用BPEL创建Web服务组合

    http://www.cnblogs.com/ahhuiyang/archive/2012/12/18/2824131.html 为简单起见,本例的Web服务组合只调用一个Web Service AP ...

  3. yum提示another app is currently holding the yum lock;waiting for it to exit

    Another app 解决方法:rm -rf /var/run/yum.pid 来强行解除锁定,然后你的yum就可以运行了

  4. 9月13日JavaScript语句循环（100以备奇偶数、100以内与7先关的数、100以内整数的和、10以内阶乘、乘法口诀、篮球弹起高度、64格子放东西）

    3.循环 循环是操作某一个功能(执行某段代码). ①循环四要素: a 循环初始值 b 循环的条件 c 循环状态 d 循环体 ②for循环 a 穷举:把所有的可能性的都一一列出来. b 迭代:每次循环都 ...

  5. ecshop if标签，超过N条，就输出记录 elseif、库存显示方式

    <!--商品详情右侧 相关商品推荐--> <!-- {if $related_goods} --> <!--{foreach from=$related_goods it ...

  6. css 常用代码解析

    .cBan_1 .e2-pro li a{ display: block; -webkit-transition: all 0.3s linear;transition: all 0.3s linea ...

  7. Oracle VM Virtual

    版本5.xx不能导入 要用旧版的4.3.10

  8. OC-弱语法

    [Person test] : unrecognized selector sent to instance 给Person对象发送了一个不能识别的消息 :test

  9. Python开发【第十六篇】：AJAX全套

    概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

  10. maven 错误解决办法集

    一.mavenFailed to execute goal org.apache.maven.plugins:maven-surefire-plugin解决方法 1.测试代码没有获得通过,可以尝重命名 ...