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 相关文章推荐
jQuery 剧场版 你必须知道的javascript
May 27 Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
读jQuery之十 事件模块概述
Jun 27 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
基于Bootstrap的网页设计实例
Mar 01 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
Aug 20 Javascript
Vue数字输入框组件使用方法详解
Feb 10 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
如何使用原生Js实现随机点名详解
Jan 06 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+Html+缓存
2006/11/25 PHP
PHP ajax 分页类代码
2008/11/13 PHP
php strcmp使用说明
2010/04/22 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
php扩展开发入门demo示例
2019/09/23 PHP
模仿百度三维地图的js数据分享
2011/05/12 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
纯javascript模仿微信打飞机小游戏
2015/08/20 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
解决node.js安装包失败的几种方法
2016/09/02 Javascript
AngularJS  自定义指令详解及实例代码
2016/09/14 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
koa上传excel文件并解析的实现方法
2018/08/09 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Python中的两个内置模块介绍
2015/04/05 Python
在Python中使用poplib模块收取邮件的教程
2015/04/29 Python
自己使用总结Python程序代码片段
2015/06/02 Python
Python 正则表达式实现计算器功能
2017/04/29 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python开发的HTTP库requests详解
2017/08/29 Python
两个元祖T1=('a', 'b'),T2=('c', 'd')使用匿名函数将其转变成[{'a': 'c'},{'b': 'd'}]的几种方法
2019/03/05 Python
python可视化text()函数使用详解
2020/02/11 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
电子商务自荐书范文
2014/01/04 职场文书
升旗仪式主持词
2014/03/19 职场文书
学习考察心得体会
2014/09/04 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
大足石刻导游词
2015/02/02 职场文书
2015年维修工作总结
2015/04/25 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android