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. WCF通信过程

    无废话WCF入门教程二[WCF应用的通信过程] 一.概述 WCF能够建立一个跨平台的安全.可信赖.事务性的解决方案,是一个WebService,.Net Remoting,Enterprise Ser ...

  2. 在一个apk中调用另外一个apk中的activity

    今天忽然想到如果要在一个activity中调用另外一个activity该怎么办呢? 感觉这个应该比较简单,应为activity的启动方式就两种:显式启动.隐式启动: 显式启动的话肯定不行,那就只能使用 ...

  3. win server 2003 将MBR转为GPT突破硬盘2TB的限制(附微软磁盘科普)

    备注:https://technet.microsoft.com/zh-cn/library/cc773223.aspx GUID 分区表 与支持最大卷为 2 TB (terabytes) 并且每个磁 ...

  4. HDU1789(Doing Homework again)题解

    HDU1789(Doing Homework again)题解 以防万一,题目原文和链接均附在文末.那么先是题目分析: [一句话题意] 给定任务分数和其截止日期,每日可完成一任务,输出当罚分尽可能小时 ...

  5. 解决Firefox下input button内文字垂直居中

    众所周知,在Firefox下input type=”button”的文字是不好居中的,原因在于Firefox自己比较二,弄了个私有属性,导致以下问题的出现: 按钮左右本身有2px的间距(FF私有属性写 ...

  6. sshd被攻击的自动防御方法v2

      1.增加了“频繁攻击的封锁时间”,即设置为上次攻击时间的2倍 2.加入了数据库支持,将攻击者相关信息记录入库,如攻击者ip.攻击次数.封锁时间 3.简化了代码   具体实现步骤如下:   1.创建 ...

  7. Struts2 注解(转)

    转自:http://blog.csdn.net/wwwqvod/article/details/6214431 也叫Zero Configuration(零配置),它省去了写xml文件的麻烦,可以直接 ...

  8. PBOC/EMV 中SDA和DDA简介

    PBOC/EMV里有两个非常重要的概念,SDA(static data authentication)和DDA(dynamic data authentication),分别叫做静态数据认证和动态数据 ...

  9. 论山寨手机与Android联姻 【2】手机OS成为核心

    手机凭借通话和短信这两项基本功能,积累了用户,开拓了市场.但是用户的需求是永无止境的,对于手机制造商来说,紧跟用户需求,拓展手机功能,是机会也是挑战. 1988年第一款数码相机,在日本上市.数码相机的 ...

  10. mysql_healthly

    cat mysql_healthly.php <?php if (!defined('IN_PDK')){ define('IN_PDK', true); } $db_name = $_GET[ ...