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 ...
随机推荐
- 视频编解码学习之路(H264)
学习视频编解码技术很难吗?视频编解码技术的未来是什么? 明了的说,无论是软件还是硬件设计,视频编解码技术有很多难点,都需要很长一段时间积累才行. 从一开始接触MPEG-2到最新的H.264标准,可算走 ...
- android的color整理(一)
很全面的颜色收集方便以后使用. <!-- 白色 --> <color name="ivory">#fffff0</color> <!-- ...
- 自定义Dialog,实现由下而上的弹出效果(模仿QQ退出等)
方法: public Dialog createDialog(Context context, View view) { Dialog mSelectPhotoDialog = null; mSele ...
- (转)python struct简介
最近在学习python网络编程这一块,在写简单的socket通信代码时,遇到了struct这个模块的使用,当时不太清楚这到底有和作用,后来查阅了相关资料大概了解了,在这里做一下简单的总结. 了解c语言 ...
- size对齐
写了很多程序,在很多地方都要用到内存长度对齐,比如文件的大小,pe文件内存的对齐等等. 下面记下两种简单的方法,觉得没啥大用处. #include <IOSTREAM> #include ...
- 深搜基础题目 杭电 HDU 1241
HDU 1241 是深搜算法的入门题目,递归实现. 原题目传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1241 代码仅供参考,c++实现: #incl ...
- Repeater隔行变色,两个方式
<table> <tr> <td>用户编号</td> </tr> <asp:Repeater ID="rptUser&quo ...
- jquery easyui filebox 上传附件 + asp.net后台
form必须加这个属性enctype="multipart/form-data",否则后台获取不到文件 <script> function uploadFiles() ...
- 第二章——Serializable的使用(跨进程使用和Intent的传递对象)
一.Serializable类(JAVA本身具有的) 简介:Serializable是一个接口. 作用:是JAVA提供的序列化接口,实现序列化和反序列化的操作. 二.跨进程使用 1.事前准备 publ ...
- Python中字符串切片操作
一:取字符串中第几个字符 print "Hello"[0] 表示输出字符串中第一个字符print "Hello"[-1] 表示输出字符串中最后一个字符 二: ...