最近一直在恶补基础JS H5 CSS3的基础知识

关于这个瀑布流:

本来打算看着教程来做的。 不过 感觉理解起来有点复杂。

SO， 自己参考教程默写了一个。。

目前我所接触过的瀑布流布局分为2大类

主要区分在于 float布局 或者position布局

点击这里下载Demo

贴下源码：（可能有些BUG，没有具体测试）

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>无标题文档</title>

 <style>

 *{ margin:0; padding:0;}

 body{ background:#ddd; }

 ul{ width:1000px; margin:0 auto; position:relative;}

 ul li{ width:300px; padding:5px;text-align:center; background:#FFF; border:1px solid #CCC; position:absolute; list-style-type:none; top:0;}

 ul li img{ width:300px; height:auto;}

 </style>

 <script>

     //@powerd by websir

     window.onload = function(){

         var oAdd = document.getElementById("add");

         var oUl = document.getElementById("ul");

         var aLi = oUl.getElementsByTagName("li")

         var aPos = [{top:0,left:"0px"},{top:0,left:"315px"},{top:0,left:"630px"}]

         var s = 0;

         for(var i =0;i<aLi.length;i++)

         {

                 sortLi(aLi[i])

         }

         add.onclick = function(){

             var newLi = document.createElement("li");

             var img = new Image();

             var span = document.createElement("span");

             span.innerHTML =  Math.ceil(Math.random()*8)*11111;

             img.src = Math.ceil(Math.random()*8)+".jpg";

             newLi.appendChild(img);

             newLi.appendChild(span)

             img.onload = function(){

                 oUl.appendChild(newLi);

                 sortLi(newLi)

             }

         }

         function sortLi(obj){

             aPos.sort(function(a,b){return a.top-b.top});

             obj.style.left = aPos[0].left;

             obj.style.top = aPos[0].top+"px";

             aPos[0].top += obj.offsetHeight+5;

         }

     }

 </script>

 </head>

 <body>

 <input id="add" value="添加" type="button" style="position:fixed; height:30px; width:100%; top:0; z-index:9;" />

 <ul id="ul">

 <li><img src="1.jpg" />22222</li>

 <li><img src="2.jpg" />22222</li>

 <li><img src="3.jpg" />22222</li>

 <li><img src="4.jpg" />22222</li>

 <li><img src="5.jpg" />22222</li>

 <li><img src="6.jpg" />22222</li>

 <li><img src="7.jpg" />22222</li>

 <li><img src="8.jpg" />22222</li>

 </ul>

 </body>

 </html>

比较容易理解的---原生js瀑布流的更多相关文章

  1. 原生js瀑布流

    HTML部分代码............................... CSS部分代码........................... 原生js部分代码................. ...

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

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

  3. 面向对象js瀑布流效果

    index.html <!doctype html><html lang="en"> <head>  <!--网站编码格式,UTF-8 国 ...

  4. 分享：纯 css 瀑布流 和 js 瀑布流

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

  5. 【js】【图片瀑布流】js瀑布流显示图片20180315

    js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...

  6. JS 瀑布流效果

    JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...

  7. 前端对base64编码的理解，原生js实现字符base64编码

    目录 常见对base64的认知(不完全正确) 多问一个为什么,base64到底是个啥? 按照我们的思路实现一下 到这里基本就实现了,结果跟原生的方法打印的是一样的 下一次 @( 对于前端工程师来说ba ...

  8. js瀑布流（定位法）

    1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...

  9. JS瀑布流效果

    本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...

随机推荐

  1. 老李分享：接电话扩展之uiautomator 1

    老李分享:接电话扩展之uiautomator   poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq ...

  2. 老李分享：Python开发性能测试脚本

    老李分享:Python开发性能测试脚本   测试开发工程师的工作主要是根据测试目标来完成,帮助测试人员完成测试目标,测试的业务需求是测试人员提出,但是由于环境的制约,手中没有性能测试工具的时候,性能测 ...

  3. 可以随鼠标拖拽的div

    可以拖拽的div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  4. 学习Sass笔记之概念篇

    1 什么是CSS预处理器 首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用.CSS 预 ...

  5. 一次young gc耗时过长优化过程

    1    问题源起 上游系统通过公司rpc框架调用我们系统接口超时(默认超时时间为100ms)数量从50次/分突然上涨到2000次/分,在发生变化时间段里我们的系统也没有做过代码变更,但上游系统的调用 ...

  6. delphi 7 mdi子窗体。。。无法更改以命令对象为源的记录集对象的 ActiveConnection 属性。

    问题是这样的 我做了一个小程序 把 adoconnection放到了主窗体  连接的是access数据库; 新建了一个子窗体继承自FBase  新建了一个pubulic方法 qrySearch 实现了 ...

  7. jQuery animate()动画效果

    1.jQuery动画效果 jQuery animate()方法用于创建自定义动画 $(selector).animate({params},speed,callback); //必需的 params ...

  8. Cookie中文乱码问题

    页面一登录,页面二保存用户信息,放入Cookies里. 但是Cookies放入中文会引起编码问题,如报错“Control character in cookie value, consider BAS ...

  9. 浩哥解析MyBatis源码（十一）——Parsing解析模块之通用标记解析器（GenericTokenParser）与标记处理器（TokenHandler）

    原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6724223.html 1.回顾 上面的几篇解析了类型模块,在MyBatis中类型模块包含的 ...

  10. Linux-粘滞位的使用

    粘滞位(Stickybit),又称粘着位,是Unix文件系统权限的一个旗标.最常见的用法在目录上设置粘滞位, 也只能针对⽬录设置,对于⽂件⽆效.则设置了粘滞位后,只有目录内文件的所有者或者root才可 ...