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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
js 上下左右键控制焦点(示例代码)
Dec 14 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
js获取checkbox复选框选中的选项实例
Aug 24 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
May 06 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
Jul 26 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
PHP运行时强制显示出错信息的代码
2011/04/20 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
2011/06/27 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
2014/10/31 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python logging日志模块的详解
2017/10/29 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
对python中矩阵相加函数sum()的使用详解
2019/01/28 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
Python集中化管理平台Ansible介绍与YAML简介
2019/06/12 Python
django 通过url实现简单的权限控制的例子
2019/08/16 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
Python图片的横坐标汉字实例
2019/12/04 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Keras loss函数剖析
2020/07/06 Python
瑞士最大的图书贸易公司:Orell Füssli
2019/12/28 全球购物
初中三年学生的学习自我评价
2013/11/13 职场文书
公司合作意向书范文
2014/07/30 职场文书
催款函范文
2015/06/24 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis