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排列的更多相关文章

  1. 4.瀑布流js

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 分享:纯 css 瀑布流 和 js 瀑布流

    分享一次纯 css 瀑布流  和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...

  3. [JS练习] 瀑布流照片墙

    记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. 8款实用的Jquery瀑布流插件

    1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机 ...

  5. OC-UICollectionView实现瀑布流

    UICollectionView实现瀑布流 在iOS中可以实现瀑布流的目前已知的有2种方案: 使用UIScrollView自己封装一套,这种方案是应用于iOS6之前的,因为iOS6才出来UIColle ...

  6. 代码: 两列图片瀑布流(一次后台取数据,图片懒加载。下拉后分批显示图片。图片高度未知,当图片onload后才显示容器)

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  7. js瀑布流 原理实现揭秘 javascript 原生实现

    web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...

  8. 原生JS实现瀑布流

    浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...

  9. 手把手教你js原生瀑布流效果实现

    手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...

随机推荐

  1. css014 响应式web设计

    css014 响应式web设计 一.    响应式web设计基础知识 1.rwd的三大理念:a.用于布局的弹性网络, b.用于图片和视频的弹性媒体,c.为不同屏幕宽度创建的不同样式的css媒体查询. ...

  2. 10月21上午PHP基础

    新建的php文件必须要放在wamp安装目录下的www文件夹里.如果拿到别的地方,php无法运行,将显示错误. <?php?> //嵌入php的方式 <?php //嵌入php方式的开 ...

  3. 用javascript替换URL中的参数值

    <script> function changeUrlArg(url, arg, val){ var pattern = arg+'=([^&]*)'; var replaceTe ...

  4. conv2、filter2、imfilter的区别

    conv2.filter2.imfilter的区别 -------------------------------------conv2函数------------------------------ ...

  5. Windows 无法自动将 IP 协议堆栈绑定到网络适配器。解

    Windows 无法自动将 IP 协议堆栈绑定到网络适配器.解  昨天断网了,所以把珍藏已久的无线网卡拿出来蹭网.我系统是Windows 7 但是装上去东显示已启用,就是用不了,用windows诊断是 ...

  6. ansible定时任务

    不得不说,ansible很强大,ansible定制任务模块显示 ansible all -m cron -a 'name="ban IP of login" minute=* ho ...

  7. 将当前网址生成快捷方式在桌面(仅支持IE)

    //安装到桌面function toDesktop(sUrl,sName){ try { var WshShell = new ActiveXObject("WScript.Shell&qu ...

  8. Kafka Producer相关代码分析【转】

    来源:https://www.zybuluo.com/jewes/note/63925 @jewes 2015-01-17 20:36 字数 1967 阅读 1093 Kafka Producer相关 ...

  9. 移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 )

    序言:应朋友要求随手写了一下移动端 css实现自适应正圆 ( 宽高随着手机屏幕宽度自适应 ) ,以备后用 LESS代码: .adaptive-circle { margin: 50px auto 0; ...

  10. jQuery源码-jQuery.fn.attr与jQuery.fn.prop

    jQuery.fn.attr.jQuery.fn.prop的区别 假设页面有下面这么个标签,$('#ddd').attr('nick').$('#ddd').prop('nick')分别会取得什么值? ...