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 ...
随机推荐
- timeout Timeout时间已到.在操作完成之前超时时间已过或服务器未响应
Timeout时间已到.在操作完成之前超时时间已过或服务器未响应 问题 在使用asp.net开发的应用程序查询数据的时候,遇到页面请求时间过长且返回"Timeout时间已到.在操作完成之间超 ...
- WindowsForm 记事本 对话框
textbox: 属性: text:文本 selectedtext:获取或设置选中文本 canundo:是否能够撤销 方法: ...
- C#6 冒泡 折半查找 二维数组
人类思维--计算机逻辑思维 逻辑思维--代码实现 写书法: 描红--临摹--碑贴--自成一体--草 章节复习: 数组:一维,二维,多维 一维:豆角.连续,同一类型. 定义:数据类型[] 数组名=new ...
- An error has occurred,See error log for more details
解决Eclipse3.2配合MyEclipse5.0M2使用时打开JSP发生“An error has occurred,See error log for more details”错误的解决方法 ...
- 一个简单的shell脚本
一个简单的shell脚本 一个简单的shell脚本 编写 假设我想知道目前系统上有多少人登录,使用who命令可以告诉你现在系统有谁登录: 1.[KANO@kelvin ~]$ who2.KANO tt ...
- struts2笔记09-动态方法调用
1.action配置 <action name="testDynamic" class="com.test.actions.TestAction"> ...
- Python学习笔记(四)Python函数的参数
Python的函数除了正常使用的必选参数外,还可以使用默认参数.可变参数和关键字参数. 默认参数 基本使用 默认参数就是可以给特定的参数设置一个默认值,调用函数时,有默认值得参数可以不进行赋值,如: ...
- ubuntu常用命令(转)
1.打开终端的方法 Ubuntu 中按左侧栏的第一个“面板主页(Dash 主页)”(可以按win键调出),在里面输入terminal可以打开终端,另外打开终端的快捷键是Ctrl+Alt+T 2.修改用 ...
- 有关于/home出现100%被占用 与 vnc的关系
我在远程服务器时,通常使用的程序是vnc.因为vnc可以图形化界面,操作效果比用putty好很多. 但是,我发现使用vnc有一个问题,就是/home占用空间会达到100%. [zy@islab62 ~ ...
- win8 VS2010 配制OpenGL
glut下载地址: http://www.opengl.org/resources/libraries/glut/glutdlls37beta.zip glut.h ---> C:\Progr ...