最近很多网站都采用瀑布流风格设计，感觉挺有个性的，比较合适做图片类型的网站，没事仿开心网做一个瀑布流示例。
需要用到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>
- 大小: 2.4 MB
分享到：
相关推荐
总结来说，"Jquery瀑布流，仿美丽说，仿蘑菇街"项目是一个利用jQuery和现代Web技术实现的响应式图片展示系统，通过瀑布流布局提供良好的视觉体验，同时兼顾跨浏览器兼容性和高效的数据加载策略。对于开发者而言，...
【安卓仿蘑菇街瀑布流demo】是一个用于学习和实践的Android开发项目，它主要展示了如何在Android应用中实现类似蘑菇街商品展示的瀑布流布局。瀑布流布局是一种常见的UI设计，通常用于图片或者商品的展示，用户在滚动...
【WordPress仿蘑菇街瀑布流页面主题】是一种设计用于WordPress网站的主题，它借鉴了蘑菇街网站的界面风格，尤其是其特色的瀑布流布局。这种布局方式以其独特的视觉效果和用户体验，成为了电商和内容展示类网站的流行...
Android蘑菇街风格瀑布流排列源码
在iOS开发中，蘑菇街瀑布流的实现主要基于UICollectionView，这是一个强大的视图组件，可以实现各种复杂的布局。与UITableView相比，UICollectionView提供了更大的灵活性，可以处理多列和不规则形状的单元格，非常...
Android瀑布流实现，类似于蘑菇街和迷尚 应用里的排列.zip Android瀑布流实现，类似于蘑菇街和迷尚 应用里的排列.zip Android瀑布流实现，类似于蘑菇街和迷尚 应用里的排列.zip Android瀑布流实现，类似于蘑菇街和...
在这个"Android瀑布流仿蘑菇街"项目中，我们将深入探讨如何在Android平台上实现这种效果。 首先，瀑布流的核心是自适应布局，它需要根据屏幕尺寸和设备方向动态调整每个单元格（item）的大小。在Android中，我们...
原帖地址： ... 之前看到用线性布局写的瀑布流，觉得不大好，自己想了另外一种方案， （最近发现用 网页实现瀑布流 再用WebView加载才能完美实现效果） 原理使用RelativeLayout任意定位位置 核心...仿蘑菇街列表滑出代码
2. **JavaScript/jQuery实现**：为了实现瀑布流的动态加载和响应式效果，通常需要JavaScript或者jQuery来处理窗口大小变化和数据加载。例如，当用户滚动到底部时，会触发更多内容的加载，保持布局的连续性。 3. **...
《瀑布流》SDK2.0是一款专为开发者设计的，用于实现类似蘑菇街和美丽说商品展示效果的软件开发工具包。它通过模仿这两款知名电商应用的界面布局，为移动应用提供了一种动态、美观且易于滚动的商品展示方式，即瀑布流...
瀑布流布局，又称Masonry布局，是一种常见的网页和移动应用中的布局方式，尤其在电商、社交等应用中广泛使用，如蘑菇街、迷尚等。它的特点在于将内容以不规则的方式填充到屏幕中，形成一种自适应屏幕大小，且元素...
蘑菇街自动分享收录大师用来做蘑菇街收录，软件可以全自动采集店铺宝贝，自动分享到蘑菇街，同时支持定时分享，循环分享等，功能非常强大。 软件的用途： 1.可以用来做收录，增加宝贝的曝光率，可以为店铺自然引流！...
Android平台上的瀑布流布局实现，可以帮助开发者创建类似蘑菇街、迷尚等应用的视觉效果，让用户在浏览商品或内容时获得更佳的用户体验。这种布局的主要特点是每一列的高度不同，新元素会自动填充到合适的空白位置，...
本资源提供了一个功能完善的Android瀑布流实现方案，旨在帮助您轻松打造出类似蘑菇街和迷尚应用中的精美商品排列效果。瀑布流布局以其独特的视觉吸引力和高效的资源利用，在电商、社交等多个领域得到了广泛应用。 ...
标题和描述中提到的是关于构建一个类似于蘑菇街和美丽说的电商网站的源代码和模板。这类项目通常涉及到前端设计、后端开发、数据库管理等多个IT领域的知识点。下面将详细阐述这些方面： 1. **前端开发**：前端是...
实现竖向结构排版 向下滑动页面的同时加载内容
瀑布流布局，又称Masonry布局，是一种常见的网页布局方式，尤其在电商网站和图片分享平台中广泛应用，如蘑菇街、Pinterest等。这种布局的特点是页面元素（通常为图片）会像瀑布一样自上而下流下来，每列元素的高度不...
【标题】"仿蘑菇街源码,仿美丽说模板,仿蘑菇街模板整站(php微薄版)"指的是一个基于PHP编程语言开发的网站源代码，该源代码旨在模仿流行的电商平台——蘑菇街和美丽说的设计风格和功能特性。在电子商务领域，这样的...