【分享】两个经典的瀑布流代码示例
最近很多网站都采用瀑布流风格设计，感觉挺有个性的，比较合适做图片类型的网站，分享给大家两个经典的瀑布流代码示例，有兴趣的可以仿做一下，效果很漂亮哦！
<!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>
<!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="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="国外瀑布流网页布局jQuery代码，属于站长常用代码，更多焦点图代码请访问一流素材网JS代码频道。" />
<title>国外瀑布流网页布局jQuery代码-素材中国一流素材网</title>
<link rel='stylesheet' href='http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/style.css' media='screen' />
<script src="http://www.16sucai.com/uploadfile/show2012/20120722005/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="http://www.16sucai.com/uploadfile/show2012/20120722005/html5.js"></script>
<![endif]-->
<script src="http://www.16sucai.com/uploadfile/show2012/20120722005/blocksit.min.js"></script>
<script>
$(document).ready(function() {
//vendor script
$('#header')
.css({ 'top':-50 })
.delay(1000)
.animate({'top': 0}, 800);
$('#footer')
.css({ 'bottom':-15 })
.delay(1000)
.animate({'bottom': 0}, 800);
//blocksit define
$(window).load( function() {
$('#container').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8
});
});
//window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 440;
col = 2
} else if(winWidth < 880) {
conWidth = 660;
col = 3
} else if(winWidth < 1100) {
conWidth = 880;
col = 4;
} else {
conWidth = 1100;
col = 5;
}
if(conWidth != currentWidth) {
currentWidth = conWidth;
$('#container').width(conWidth);
$('#container').BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8
});
}
});
});
</script>
</head>
<body>
<!-- Content -->
<section id="wrapper">
<hgroup>
<h2>BlocksIt.js 演示实例 2</h2>
<h3>动态网格布局的jQuery插件</h3>
</hgroup>
<div id="container">
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img27.jpg" />
</div>
<strong>Sunset Lake</strong>
<p>A peaceful sunset view...</p>
<div class="meta">by j osborn</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img26.jpg" />
</div>
<strong>Bridge to Heaven</strong>
<p>Where is the bridge lead to?</p>
<div class="meta">by SigitEko</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img15.jpg" />
</div>
<strong>Autumn</strong>
<p>The fall of the tree...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img23.jpg" />
</div>
<strong>Winter Whisper</strong>
<p>Winter feel...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img17.jpg" />
</div>
<strong>Light</strong>
<p>The only shinning light...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img22.jpg" />
</div>
<strong>Rooster's Ranch</strong>
<p>Rooster's ranch landscape...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img16.jpg" />
</div>
<strong>Autumn Light</strong>
<p>Sun shinning into forest...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img21.jpg" />
</div>
<strong>Yellow cloudy</strong>
<p>It is yellow cloudy...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img28.jpg" />
</div>
<strong>Herringfleet Mill</strong>
<p>Just a herringfleet mill...</p>
<div class="meta">by Ian Flindt</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img2.jpg" />
</div>
<strong>Battle Field</strong>
<p>Battle Field for you...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img24.jpg" />
</div>
<strong>Sundays Sunset</strong>
<p>Beach view sunset...</p>
<div class="meta">by Robert Strachan</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img19.jpg" />
</div>
<strong>Sun Flower</strong>
<p>Good Morning Sun flower...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img5.jpg" />
</div>
<strong>Beach</strong>
<p>Something on beach...</p>
<div class="meta">by unknown</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img25.jpg" />
</div>
<strong>Flowers</strong>
<p>Hello flowers...</p>
<div class="meta">by R A Stanley</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="http://www.16sucai.com/uploadfile/show2012/20120722005/demo2/images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div> <!---->
</div>
</section>
<!-- Footer -->
<footer id="footer">
<a href="http://www.16sucai.com/2012/07/16576.html" target="_blank">点击下载此代码</a></footer>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构