瀑布流js排列
var _px = document.getElementById("px");
var con=document.getElementById("content");
px.onclick=function(){ /*定义需要用到的变量*/
var fli=document.getElementById("ful").getElementsByTagName("li");
var fli_left=[],fli_top=[],fli_height=[],_index=4;
var a=0,b=0;c=0; /*排列第一排的位置*/
for(i=0;i<_index;i++){
fli[i].style.left=i*240+20+"px"; /*将相关参数写入数组*/
fli_left.push(fli[i].offsetLeft);
fli_top.push(fli[i].offsetTop)
fli_height.push(fli[i].offsetHeight)
} var _size=fli.length-_index;/*算出剩余需要循环次数*/ for(r=0;r<_size;r++){ /*定初始判断参照值*/
a=fli_left[0];
b=fli_height[0]
c=0; /*循环判断出数组中最小的*/
for(i=1;i<5;i++){
if(b>fli_height[i]){
b=fli_height[i];
a=fli_left[i];
c=i;
}
} /*排列最新的位置*/
fli[_index].style.left=a+"px";
fli[_index].style.top=b+10+"px"; /*从数组中删除最小的值*/
fli_height.splice(c,1);
fli_left.splice(c,1); /*把最新的位置参数写入数组*/
var bb=fli[_index].offsetHeight+fli[_index].offsetTop;
console.log(bb)
fli_height.push(bb);
fli_left.push(fli[_index].offsetLeft);
console.log(fli[_index].offsetHeight)
console.log(fli[_index].offsetTop) _index++; } }
瀑布流js排列的更多相关文章
- 4.瀑布流js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 分享:纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- [JS练习] 瀑布流照片墙
记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 8款实用的Jquery瀑布流插件
1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...
- OC-UICollectionView实现瀑布流
UICollectionView实现瀑布流 在iOS中可以实现瀑布流的目前已知的有2种方案: 使用UIScrollView自己封装一套,这种方案是应用于iOS6之前的,因为iOS6才出来UIColle ...
- 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)
代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...
- js瀑布流 原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
- 原生JS实现瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
随机推荐
- mysql修改引擎
1 查看系统支持的存储引擎 show engines; 2 查看表使用的存储引擎 两种方法: a.show table status from db_name where name='table_na ...
- 数据库SQL优化大总结
1.对查询进行优化,要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...
- 关于Linux的内存(free -m)
查看Linux服务器下的内存使用情况,可以使用命令free -m.注意此命令只在Linux下有效,在FreeBSD中没有此命令.命令如下所示: used:已经使用的内存数 free:空闲的内存数 sh ...
- Java——布局管理器
在Swing中使用的所有布局管理器都可以实现LayoutManager接口,在Swing中主要使用的5种布局管理器:FlowLayout.BorderLayout.GridLayout.CardLay ...
- 移动端a标签点击图片有阴影处理
移动端我们在点击页面中的一些图片的时候会出现阴影.处理方法只要给a标签加上 a { -webkit-tap-highlight-color: transparent; -webkit-touch-ca ...
- Js获取指定Url参数
在 C#.PHP.JSP 中,都有直接获取 Url 中指定参数的方法,但 Javascript 却没有这样的现在方法,得自己写一个.在 Web 的开发过程中,获取 Url 中的参数是十分常用的操作,所 ...
- VirtualBox5中安装的CentOS6.7安装增强工具
1.安装编译内核的相关组件 yum install kernel-devel gcc 2.安装VirtualBox增强功能 sh ./VBoxLinuxAdditions.run 3.重启系统 reb ...
- 收缩菜单 css变样
// 收缩菜单 $("#leftMenu li h3").click(function(){ $v = $(this).next('.ajax').css('display'); ...
- django笔记-模型数据模板呈现过程记录(多对多关系)
首先,推荐一个网址:http://www.tuicool.com/articles/BfqYz2F,因为这里的比我的要有条理,更有利于各位的理解. 以下仅为为个人一次不完整的笔记: 环境:ubuntu ...
- 免费api大全
天气接口 气象局接口 完整数据:http://m.weather.com.cn/data/101010100.html 解析 用例 当天数据:http://www.weather.com.cn/dat ...