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瀑布流代码的更多相关文章

  1. javascript瀑布流效果

    javascript瀑布流效果 其实javascript瀑布流 前几年都已经很流行了(特别是美丽说,蘑菇街),最近看到网上有人问这个瀑布流效果,所以自己有空的时候就研究了下,其实也是研究别人的代码,研 ...

  2. javascript瀑布流

    哇,瀑布流,是的,不错,不错,真的不错,很好玩的样子,于是自己想玩玩啊,来吧,就玩起. 循序渐进,我这里采用原生的js代码来书写.为了方便大家运行代码,我就全部样式和CSS都写在html里面了,当然还 ...

  3. iOS开发:代码通用性以及其规范 第一篇(附带,自定义UITextView\进度条\双表显示\瀑布流 代码设计思路)

    在iOS团队开发中,我见过一些人的代码,也修改过他们的代码.有的人的代码写的非常之规范.通用,几乎不用交流,就可以知道如何修改以及在它基础上扩展延生.有的人的代码写的很垃圾,一眼看过去,简直会怀疑自己 ...

  4. jquery实现简单瀑布流代码

    测试环境:ie8 ff13.0.1  chrome22 可以将分页获取的内容依次填入四个div中,瀑布流的分页可以以多页(比如5页)为单位二次分页,这样可以减少后台算法的复杂度 <!DOCTYP ...

  5. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  6. ios图片瀑布流代码

    ios瀑布流,实现简单的瀑布流视图布局,可以显示网络图片,下拉刷新,上拉加载更多. 下载:http://www.huiyi8.com/sc/9087.html

  7. JavaScript—瀑布流

    现在网页中需要翻页的列表,好多都已经改为瀑布流了.所以这个思路还是特别重要的 HTML Css 页面 因为每个图片的高度不一样所以她的 top 和left 我们待会通过JS计算 动态生成 js部分 思 ...

  8. jq瀑布流代码

    <style> #zh{ position:fixed; width:100%; height:100%; background:url(images/bgblack.png); top: ...

  9. web前端学习(四)JavaScript学习笔记部分(8)-- JavaScript瀑布流

    index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

随机推荐

  1. asp.netGridView使用技巧

    GridView属性介绍 AutoGenerateColumns 如果为true表示自动生成数据列,如果为false关闭自动生成状态 何为自动生成数据列  比如这么一个表格: country name ...

  2. servlet+ajax+json字符串后台传入,前端解析并把数据循环填入表格实例

    写在前面:1.源代码来源于博客http://blog.sina.com.cn/u/2904067371 ,在此基础上对于前端代码稍作更改,把传过来的数据解析并传入表格2.json解析,用eval()3 ...

  3. 【转】这些隐藏在苹果iPhone当中的内置代码你是否知道?

    原文地址:http://www.ithome.com/html/iphone/200569.htm 每一部手机都有一些内置的隐藏代码,我们称之为“指令”,这些代码加在一起就叫做“指令集”.当然这些代码 ...

  4. STM32学习笔记之一(初窥STM32)

    怎么做好学习笔记? 答:自我感知-->学习知识-->归纳总结-->自我升华(真正属于自己的知识是,抛开书本,运用时,你还能记得的思想) 自我感知--看到知识概念,先自我感觉那应该是个 ...

  5. MFC对话框中解决回车键、ESC键退出的方法

    BOOL CYourDlg::PreTranslateMessage(MSG* pMsg) { if(pMsg->message==WM_KEYDOWN&&pMsg->wP ...

  6. gcc 编译和链接

    1.现在对两个文件生成可执行文件 //thanks.c #include <stdio.h> int main(void) { printf("Hello World\n&quo ...

  7. (转)对mysql explain讲的比较清楚的

    转自:http://www.blogjava.net/persister/archive/2008/10/27/236813.html 在 explain的帮助下,您就知道什么时候该给表添加索引,以使 ...

  8. 无良教程-破解SublimeText3

    这教程实际上并不是倡导大伙儿去破解软件然后传播出去以侵犯作者的权益,纯粹是技术分享,如果大伙儿觉得Low了,可立马删除. sublime text是我非常喜欢的一款编辑器,在ubuntu上,之前用的一 ...

  9. Codeforces 241B

    因为博客园的公式编辑有点坑,所以-- 原题

  10. java 数字前自动补零实现

    /** * 里数字转字符串前面自动补0的实现. * */ public class TestStringFormat { public static void main(String[] args) ...