jQuery+HTML5美女瀑布流布局实现方法


Posted in Javascript onSeptember 21, 2015

本文实例讲述了jQuery+HTML5美女瀑布流布局实现方法。分享给大家供大家参考。具体如下:

这是一款JavaScript与HTML5实现美女瀑布流布局,本方法是把图片的路径写在了JS的数组里,不过重点好像不是在这里,而是在图片如何自动排列的问题,你可以运行本实例后,点击“加载瀑布流布局”按钮,即可看到图片的瀑布流排列效果,现在很流行这个,希望您从本代码中能找到一些灵感。

运行效果截图如下:

jQuery+HTML5美女瀑布流布局实现方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>美女瀑布流</title>
<style type="text/css">
*{margin:0;padding:0}
div.section{overflow:hidden}
div.aside{width:225px;float:left;display:inline}
div.aside div.content{margin:5px;background:#666}
div.aside div.content img{width:205px;margin:5px;}
div.aside div.content div.imgcaption{margin:0 5px;line-height:20px}
</style>
</head>
<body>
<div class="section">
 <div class="aside"></div>
 <div class="aside"></div>
 <div class="aside"></div>
 <div class="aside"></div>
</div>
<button>加载瀑布流布局</button>
</body>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript"> 
var json=[
 {"text":"1","src":"images/1.jpg","height":"273"},
 {"text":"2","src":"images/2.jpg","height":"273"},
 {"text":"3","src":"images/3.jpg","height":"306"},
 {"text":"4","src":"images/4.jpg","height":"270"},
 {"text":"5","src":"images/5.jpg","height":"273"},
 {"text":"6","src":"images/6.jpg","height":"307"},
 {"text":"7","src":"images/7.jpg","height":"272"},
 {"text":"8","src":"images/8.jpg","height":"285"},
 {"text":"9","src":"images/9.jpg","height":"303"},
 {"text":"10","src":"images/10.jpg","height":"272"},
 {"text":"11","src":"images/5.jpg","height":"273"},
 {"text":"12","src":"images/7.jpg","height":"273"},
 {"text":"13","src":"images/3.jpg","height":"280"}
]
function getSmallDiv(wrap,oD){
 var len=oD.length;
 var h=Infinity;
 var getD;
 for(var i=0;i<len;i++){
  if(oD.eq(i).height()<h){
   h=oD.eq(i).height();
   getD=oD.eq(i);
  }
 }
 return getD;
}  
$("button").click(function(){
 for(var i=0;i<json.length;i++){
  var str;
  str="<div class=\"content\">";
  str+="<img src="+json[i].src+" height="+json[i].height+" alt=\"\" />";
  str+="<div class=\"imgcaption\">"+json[i].text+"</div>";
  str+="</div>";
  getSmallDiv($(".section"),$(".aside")).append(str);
 }
});
</script>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
摘自百度的图片轮换效果代码
Nov 19 Javascript
表单项的name命名为submit、reset引起的问题
Dec 22 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
Aug 14 Javascript
javascript动态加载二
Aug 22 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
Apr 02 Javascript
JavaScript中把数字转换为字符串的程序代码
Jun 19 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
Dec 04 Javascript
JavaScript基础——使用Canvas绘图
Nov 02 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
js css自定义分页效果
Feb 24 Javascript
JavaScript 性能提升之路(推荐)
Apr 10 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 #Javascript
Javascript验证方法大全
Sep 21 #Javascript
JavaScript验证Email(3种方法)
Sep 21 #Javascript
基于jQuery实现多层次的手风琴效果附源码
Sep 21 #Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 #Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 #Javascript
jQuery实现响应鼠标滚动的动感菜单效果
Sep 21 #Javascript
You might like
PHP取进制余数函数代码
2012/01/19 PHP
php解决约瑟夫环示例
2014/04/09 PHP
Laravel中使用自己编写类库的3种方法
2015/02/10 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
JQuery onload、ready概念介绍及使用方法
2013/04/27 Javascript
javascript实时显示当天日期的方法
2015/05/20 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
纯JS代码实现一键分享功能
2016/04/20 Javascript
Bootstrap3 input输入框插入glyphicon图标的方法
2016/05/16 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
2016/10/14 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
JS中min函数实例讲解
2019/02/18 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
2019/08/06 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
[48:46]完美世界DOTA2联赛PWL S2 SZ vs FTD.C 第二场 11.19
2020/11/19 DOTA
在Python中使用PIL模块处理图像的教程
2015/04/29 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
Python实现最常见加密方式详解
2019/07/13 Python
python对execl 处理操作代码
2020/06/22 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
中国高端家电购物商城:顺电
2018/03/04 全球购物
大学生党员自我批评
2014/02/14 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
党员自我剖析材料(群众路线)
2014/10/06 职场文书
继承公证书格式
2015/01/26 职场文书
2015政治思想表现评语
2015/03/25 职场文书
趣味运动会赞词
2015/07/22 职场文书
毕业设计工作总结
2015/08/14 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
Springboot中如何自动转JSON输出
2022/06/16 Java/Android