<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>超简易瀑布流</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td ,span, object, iframe{ padding: 0; margin: 0; } table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
ol, ul { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
q:before, q:after { content:""; }
.clearfix:after{ content:""; height:0; visibility:hidden; display:block; clear:both;}
.clearfix{ zoom:1;}

/*start*/
.box{width:1000px; margin:0 auto auto auto;}
.add-btn{ display:block; margin:20px auto auto auto; width:90px; height:30px; text-align:center; line-height:30px; font-size:16px; background:#C33; border-radius:10px; text-decoration:none; color:#fff;}
.column img{width:100%;}
</style>
</head>

<body>
<div class="box ">
<div id="waterfall" class="clearfix">

</div>
</div>
<a href="javascript:;" class="add-btn" id="add">加载更多</a>
</body>
<script>
window.onload = function(){
document.getElementById("add").onclick = function(){
waterFall();
}
}

function waterFall(){
var wf = document.getElementById("waterfall"),
wf_len = 4, //列数
wf_data = 2, //每列添加数据条数
wf_space = 10,//每列左右间隔，单位px
wf_bottom = 20,//每列元素上下间隔，单位px
wf_boxWidth = parseInt(wf.offsetWidth),
wf_width = parseInt((wf_boxWidth-((wf_len-1)*wf_space))/wf_len);
for(var i=0;i<wf_len;i++){ //循环
var column = document.createElement("div");
column.id = "column-"+i;
column.className = "column";
column.style.width = wf_width+"px";
column.style.cssFloat = "left";
column.style.styleFloat = "left"; //兼容IE
column.style.overflow = "hidden";
if(i===0){
column.style.marginLeft = 0;
}else{
column.style.marginLeft = wf_space+"px";
}
wf.appendChild(column);
for(var j=0;j<wf_data;j++){
var dom = document.getElementById("column-"+i);
var node=document.createElement("div");
node.style.marginBottom = wf_bottom+"px";
var img =Math.floor(Math.random()*5); //随机图片名称
node.innerHTML = '<img src="http://7u2sas.com1.z0.glb.clouddn.com/images/img'+img+'.jpg">'; //需要插入的内容,结构。可在css里控制样式
dom.appendChild(node);

}
}
}

</script>
</html>

h5的瀑布流的更多相关文章

  1. H5瀑布流如何实现

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

  2. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  3. 简单CSS定位瀑布流实现方法

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

  4. 比较容易理解的---原生js瀑布流

    最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主 ...

  5. jQuery 实现的瀑布流

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  6. jquery瀑布流的制作

    首先,还是来看一下炫酷的页面: 今天就边做边说了: 一.准备工作 新建css,js,img文件夹存放相应文件,并在demo.html文件中引入外部文件(注意要把jquery文件引入),这里就不过多描述 ...

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

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

  8. CollectionView水平和竖直瀑布流的实现

    最近在项目中需要实现一个水平的瀑布流(即每个Cell的高度是固定的,但是长度是不固定的),因为需要重写系统 UICollectionViewLayout中的一些方法通过计算去实现手动布局,所以本着代码 ...

  9. 用jquery实现瀑布流案例

    一.瀑布流是我们常见的案例,这里主要讲述,用jquery的方式实现瀑布流的功能! 引言:我们经常见到很多网站的瀑布流功能,如淘宝.京东这些商品等等.. 实现它我们首先考虑几个问题:1.获取到数据   ...

随机推荐

  1. 生成SQL脚本的方法

    2点需要注意的关键: (1)选择特定数据库对象不包含用户选项: (2)要编写脚本的数据的类型选择"架构和数据".

  2. finally语句包含return的情况

    结论:1.不管有木有出现异常,finally块中代码都会执行:2.当try和catch中有return时,finally仍然会执行:3.finally是在return后面的表达式运算后执行的(此时并没 ...

  3. Compile Time Assertion..

    The most seen assertion are during runtime, but this one is at compile time, to give the error more ...

  4. 本篇内容简要介绍BASE64、MD5、SHA、HMAC几种加密算法。

    BASE64编码算法不算是真正的加密算法.     MD5.SHA.HMAC这三种加密算法,可谓是非可逆加密,就是不可解密的加密方法,我们称之为单向加密算法.我们通常只把他们作为加密的基础.单纯的以上 ...

  5. SpringMvc处理post请求乱码的filter

    <filter>         <filter-name>encodingFilter</filter-name>         <filter-clas ...

  6. LYF模板连接.txt

    在解决方案里创建了一个新建网站,在其右键下添加一个模板后,准备使用模板的,在添加新建项里突然没有“使用模板页的web窗体”,顿时感觉悲剧... 解决方法:模板页代码---LYFMaterPage.Ma ...

  7. (转载)Git使用教程

    转载自:http://www.418log.org/post-89.html .什么是Git 简单地说,Git是 Linux 之父 Linus Trovalds,为管理 Linux 内核代码而建立的, ...

  8. 2013最新Android常用的工具类整理

    主要介绍总结的Android开发中常用的工具类,大部分同样适用于Java. 目前包括HttpUtils.DownloadManagerPro.ShellUtils.PackageUtils. Pref ...

  9. 矩阵类c++实现

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  10. JSP内置对象--request对象 (setCharacterEncoding("GBK"),getParameter(),getParameterValues(),getParameterNames(),getServletPath(),getContextPath()

    使用最多,主要用来接收客户端发送而来的请求信息,他是javax.servlet.http.HttpServletRequest接口的实例化对象. public interface HttpServle ...