Jquery简单瀑布流代码示例. 仿开心网,蘑菇街.

最新推荐文章于 2019-02-27 10:22:10 发布
最新推荐文章于 2019-02-27 10:22:10 发布
阅读量126 收藏
点赞数
文章标签： JavaScript jQuery 瀑布流 ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq362217990/article/details/84253046
版权
最近很多网站都采用瀑布流风格设计，感觉挺有个性的，比较合适做图片类型的网站，没事仿开心网做一个瀑布流示例。

需要用到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>


[/code]
JJXI11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Jquery瀑布流，仿美丽说，仿蘑菇街
06-20
Jquery瀑布流，本人亲测，能用，兼容所有浏览器
仿淘宝/蘑菇街形式，瀑布流效果 -- 固定列数
a272503680的专栏
11-02 2720
DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" > html> head> meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> title> 瀑布流实
Jquery简单瀑布流代码示例. 仿开心网,蘑菇街
前端－走在WEB页面最前端的前端交互师
12-18 929
最近很多网站都采用瀑布流风格设计，感觉挺有个性的，比较合适做图片类型的网站，仿开心网做一个瀑布流示例。  需要用到Jquery，jquery.masonry.min.js  演示地址：http://www.yiwugou.com/sdialbum/list_1.html JQuery代码：    $(function(){   var $container =
jquery瀑布流布局(masonry.js)
wangchaoqi1985的博客
08-14 3792
这样参差不齐的多栏布局，叫“方砖石布局”，和“瀑布流布局”，很多网站都有使用这样的布局，比如：淘宝的哇哦、花瓣网、蘑菇街 这里，我们仅使用瀑布流插件实现当页内容的排列。 那这插件到底有什么用呢？请
使用Jquery的getJSON跨域请求蘑菇街图片资源实现瀑布流
wangongda的博客
06-26 883
先看下效果 ps:这是一个可以自适应屏幕的瀑布流； 那么来看看怎么去实现 1.找到蘑菇街的xhr请求地址； 2.从这个请求中找到我们需要的图片资源请求路径，从下图可以看出它在请求回的对象的多层属性下； 3.通过下图对比，找到它的控制参数（图中可以看出它是通过page去控制的） 4.结合普通瀑布流和上述资料实现跨域请求的瀑布流，下面上代码：
android 瀑布流效果(仿蘑菇街) .
知他人之所知，晓他人之不晓。
01-06 3588
我们还是来看一款示例：（蘑菇街）                     看起来很像我们的gridview吧，不过又不像，因为item大小不固定的，看起来是不是别有一番风味,确实如此.就如我们的方角图形，斯通见惯后也就出现了圆角.下面我简单介绍下实现方法. 第一种： 我们在配置文件中定义好列数.如上图也就是3列.我们需要定义三个LinearLayout，然后把获取到的图
jQuery 实现瀑布流布局及下滑加载页面
YICONGITSME的博客
10-26 3452
蘑菇街商品的信息，一个接一个，衔接紧密，根据浏览器大小有几列，元素等宽不等高，向下滑动加载 就是常见的瀑布流布局， 实现瀑布流布局有三种方式，JavaScript原生，jQuery，和CSS3 column方法。 我写了JavaScript 和jQuery两种。 jQuery相对于js的优点就是，获取，定义，遍历元素方便，有很多封装的函数，支持连缀，隐式迭代。 如要获取一个类名为box的元...
android 瀑布流效果(仿蘑菇街)
意者行风Android之旅
06-28 1341
首先我们还是来看一款示例：（蘑菇街） 看起来很像我们的gridview吧，不过又不像，因为item大小不固定的，看起来是不是别有一番风味,确实如此.就如我们的方角图形，斯通见惯后也就出现了圆角.下面我简单介绍下实现方法. 第一种： 我们在配置文件中定义好列数.如上图也就是3列.我们需要定义三个LinearLayout，然后把获取到的图片add里面就ok了. main.xml
android瀑布流效果（仿蘑菇街）
NewStart的专栏
05-17 721
android瀑布流效果（仿蘑菇街） 我们还是来看一款示例：（蘑菇街）                     看起来很像我们的gridview吧，不过又不像，因为item大小不固定的，看起来是不是别有一番风味,确实如此.就如我们的方角图形，斯通见惯后也就出现了圆角.下面我简单介绍下实现方法. 第一种： 我们在配置文件中定义好列数.如上图也就是3列.我们需要定
安卓仿蘑菇街瀑布流demo
11-09
【安卓仿蘑菇街瀑布流demo】是一个用于学习和实践的Android开发项目，它主要展示了如何在Android应用中实现类似蘑菇街商品展示的瀑布流布局。瀑布流布局是一种常见的UI设计，通常用于图片或者商品的展示，用户在滚动...
Android蘑菇街风格瀑布流排列源码.zip
07-30
Android蘑菇街风格瀑布流排列源码
Android瀑布流实现，类似于蘑菇街和迷尚 应用里的排列.zip
05-28
在这个“Android瀑布流实现，类似于蘑菇街和迷尚应用里的排列”的项目中，我们可以深入学习如何在Android平台上构建这样的功能。以下是一些关键知识点： 1. **布局管理器**：瀑布流布局的核心是自定义的布局管理器...
蘑菇街瀑布流实现
11-01
在iOS开发中，蘑菇街瀑布流的实现主要基于UICollectionView，这是一个强大的视图组件，可以实现各种复杂的布局。与UITableView相比，UICollectionView提供了更大的灵活性，可以处理多列和不规则形状的单元格，非常...
jQuery图片瀑布流
ICY___的博客
02-27 677
很早之前就听说过瀑布流布局，瀑布流布局能够降低页面的复杂度，对用户也比较友好，但它也有局限，对于一些页面差异比较大的页面或内如不是一种很好的选择。 推荐大家看一下瀑布流鼻祖Pinterest的网站，不过好像需要注册......或者就是手机淘宝和京东可以一直下滑显示新的内容之类等等 或者看看我的（图片来源于百度）：   实现方式： 1、传统多列浮动。代表网站蘑菇街和哇哦。 2、用...
rx_a7_analysis.v
08-06
rx_a7_analysis
Spring Boot高校党务系统.zip
08-06
Spring Boot高校党务系统.zip
简约漂亮的网站弹窗公告源代码 使用cookie记录
08-06
简约漂亮的网站弹窗公告源代码 使用cookie记录
Linux数据传输利器：curl命令的全面指南
最新发布
08-06
Linux是一种开源的、基于Unix的操作系统内核，由林纳斯·托瓦兹（Linus Torvalds）于1991年首次发布。Linux内核是操作系统的核心部分，负责管理系统资源、调度进程、处理硬件设备请求等。Linux内核以其稳定性、安全性、灵活性和高性能而闻名。 Linux操作系统的特点包括： 1. **开源**：Linux的源代码对所有人开放，任何人都可以查看、修改和重新发布。 2. **跨平台**：Linux可以在多种硬件平台上运行，包括个人电脑、服务器、移动设备、嵌入式系统等。 3. **多用户和多任务**：Linux支持多用户同时使用系统，并且能够同时执行多个任务。 4. **稳定性和安全性**：Linux系统以其稳定性和安全性而著称，适合用于服务器和其他需要高可靠性的应用。 5. **社区支持**：Linux拥有一个庞大的开发者和用户社区，提供大量的支持和资源。 6. **定制性**：用户可以根据自己的需要定制Linux系统，包括选择不同的桌面环境、应用程序和配置选项。 7. **广泛的软件支持**：Linux拥有丰富的软件库，包括服务器软件、图形界面、办公软件、开发工具
蘑菇街高并发多终端无线上网关实践：MWP架构与技术揭秘
《蘑菇街高并发多终端无线网关实践》是王子默在美丽联合公司内部分享的一份关于无线平台设计和优化的详细文档。该实践主要关注于解决Meili-incWirelessPlatform-MWP（MWP）在之前的架构中遇到的问题，这些问题包括...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值