JavaScript瀑布流代码
function osCode(){
var boxWidth = parseInt($(".item").css('width')),
marginTop = parseInt($(".item").css('margin-top')),
marginLeft = parseInt($(".item").css('margin-Left')),
lineArr = [0,0,0],
nodes = $(".item");
for(var i=0;i<nodes.length;i++){
var minLine = Math.min.apply({},lineArr),
targetLine = 0;
for(var j in lineArr){
if(minLine==lineArr[j])
targetLine=j;
}
var aLeft = targetLine * boxWidth + targetLine * marginLeft;
nodes.eq(i).css({top:lineArr[targetLine]+"px",left:aLeft + 'px'});
var height = parseInt(nodes.eq(i).css('height'));
lineArr[targetLine]+=height+marginTop;
}
}
JavaScript瀑布流代码的更多相关文章
- javascript瀑布流效果
javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...
- javascript瀑布流
哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还 ...
- iOS开发:代码通用性以及其规范 第一篇(附带,自定义UITextView\进度条\双表显示\瀑布流 代码设计思路)
在iOS团队开发中,我见过一些人的代码,也修改过他们的代码.有的人的代码写的非常之规范.通用,几乎不用交流,就可以知道如何修改以及在它基础上扩展延生.有的人的代码写的很垃圾,一眼看过去,简直会怀疑自己 ...
- jquery实现简单瀑布流代码
测试环境:ie8 ff13.0.1 chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...
- Jquery简单瀑布流代码示例
最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...
- ios图片瀑布流代码
ios瀑布流,实现简单的瀑布流视图布局,可以显示网络图片,下拉刷新,上拉加载更多. 下载:http://www.huiyi8.com/sc/9087.html
- JavaScript—瀑布流
现在网页中需要翻页的列表,好多都已经改为瀑布流了.所以这个思路还是特别重要的 HTML Css 页面 因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算 动态生成 js部分 思 ...
- jq瀑布流代码
<style> #zh{ position:fixed; width:100%; height:100%; background:url(images/bgblack.png); top: ...
- web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流
index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
随机推荐
- 【矩阵乘法经典应用】【ZOJ3497】【Mistwa】
题意:给定一个有向图(最多25个节点,每个节点的出度最多为4),给定起点和终点,然后从起点开始走,走到终点就停止,否则一直往下走,问能不能P步到达终点.也就是说从起点出发,走一条长度为P的路径,路径中 ...
- JAVA Socket无参构造方法的使用
1.Socket类的构造方法很多,只有无参构造方法不会尝试建立连接,其他构造方法,都会尝试建立连接的,如果建立连接失败,将会抛出异常.如果想为Socket设定连接超时时间,此时就需要使用无参构造方法, ...
- DSOframer 的简单介绍和资源整理
DSOframer 是微软提供一款开源的用于在线编辑 Word. Excel .PowerPoint 的 ActiveX 控件.国内很多著名的 OA 中间件,电子印章,签名留痕等大多数是依此改进而来的 ...
- SQL语言学习-数据定义语言
Sql语言至今已经有6个版本.SQL查询语言包括了所有对数据的操作命令,这些操作可分为四类:数据定义语言(DDL).数据操纵语言(DML).数据控制语言(DCL)和嵌入式SQL语言. 数据定义语言(D ...
- jsonsql
http://www.trentrichardson.com/jsonsql/ 可以对json数组用sql语法进行操作,主要是查询取指定字段.条件.指定字段排序及获取多少条数据,返回值json. js ...
- yum php56
美国时间2014年11月13日,PHP开发团队,在「PHP 5.6.3 is available|PHP: Hypertext Preprocessor」上公布了PHP5.6系的最新版本「PHP 5. ...
- Android Fragment真正意义上的onResume和onPause
Fragment虽然有onResume和onPause的,但是这两个方法是Activity的方法,调用时机也是与Activity相同,和ViewPager搭配使用这个方法就很鸡肋了,根本不是你想要的效 ...
- HTML5 canvas绘制线条曲线
HTML5 canvas入门 线条例子 1.简单线条 2.三角形 3.填充三角形背景颜色 4.线条颜色以及线条大小 5.二次贝塞尔曲线 6.三次贝塞尔曲线 <!doctype html> ...
- python 自学笔记(四) 列表
有几天没有更新博客了,毕竟是自学,最近事情确实比较多,有时候想学的时候反而没时间,到有时间的时候反而不想学.以后得想办法改掉这个缺点,只要有时间就要学习自己想学的东西,希望自学的同学能和我共同交流,其 ...
- Protobuf从安装到配置整理帖 --转
新做的Mini项目计划使用Google的Protobuf来做,关于Protobuf是什么玩意能干什么请自己去看这里:http://code.google.com/p/protobuf/ 这里讲一下安装 ...