比较容易理解的---原生js瀑布流
最近一直在恶补基础JS H5 CSS3的基础知识
关于这个瀑布流:
本来打算看着教程来做的。 不过 感觉理解起来有点复杂。
SO, 自己参考教程默写了一个。。
目前我所接触过的瀑布流布局分为2大类
主要区分在于 float布局 或者position布局
贴下源码:(可能有些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瀑布流的更多相关文章
- 原生js瀑布流
HTML部分代码............................... CSS部分代码........................... 原生js部分代码................. ...
- js瀑布流 原理实现揭秘 javascript 原生实现
web,js瀑布流揭秘 瀑布流再很久之前流行,可能如我一样入行晚的 ,可能就没有机会去使用.但是这个技术终究是个挺炫酷的东西,花了一个上午来研究,用原生js实现了一个,下面会附上源码,供大家解读. 说 ...
- 面向对象js瀑布流效果
index.html <!doctype html><html lang="en"> <head> <!--网站编码格式,UTF-8 国 ...
- 分享:纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- 【js】【图片瀑布流】js瀑布流显示图片20180315
js实现把图片用瀑布流显示,只需要“jquery-1.11.2.min.js”. js: //瀑布流显示图片 var WaterfallImg = { option: { maxWidth: 850, ...
- JS 瀑布流效果
JS瀑布流效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ...
- 前端对base64编码的理解,原生js实现字符base64编码
目录 常见对base64的认知(不完全正确) 多问一个为什么,base64到底是个啥? 按照我们的思路实现一下 到这里基本就实现了,结果跟原生的方法打印的是一样的 下一次 @( 对于前端工程师来说ba ...
- js瀑布流(定位法)
1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- JS瀑布流效果
本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...
随机推荐
- add spring-boot-modules to maven project
spring boot 项目中 多modules parent 冲突 在IDEAJ 中,如果建立多多modules 项目,pom文件应该是这样: <groupId>cn.ifengkou& ...
- socket编程之 select、poll、kqueue、epoll
原生API select int select(int numfds, fd_set *readfds, fd_set *writefds, fd_set *exceptfds, struct tim ...
- 【one day one linux】grep工具
grep 筛选功能 学习这些命令采用20/80原则,这样,可以达到使用%20的命令选项,处理80%的情况. #grep 的使用格式 grep [option] pattern file 那么接下来看 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(十一)数据层优化-druid监控及慢sql记录
本文提要 前文也提到过druid不仅仅是一个连接池技术,因此在将整合druid到项目中后,这一篇文章将去介绍druid的其他特性和功能,作为一个辅助工具帮助提升项目的性能,本文的重点就是两个字:监控. ...
- 【Spark2.0源码学习】-2.一切从脚本说起
从脚本说起 在看源码之前,我们一般会看相关脚本了解其初始化信息以及Bootstrap类,Spark也不例外,而Spark我们启动三端使用的脚本如下: %SPARK_HOME%/sbin/st ...
- Android -- 带你从源码角度领悟Dagger2入门到放弃(二)
1,接着我们上一篇继续介绍,在上一篇我们介绍了简单的@Inject和@Component的结合使用,现在我们继续以老师和学生的例子,我们知道学生上课的时候都会有书籍来辅助听课,先来看看我们之前的Stu ...
- EverythingAboutJava
1 GC gabage collection 垃圾回收Java GC系列(1):Java垃圾回收简介 http://mp.weixin.qq.com/s?src=3×tamp=149 ...
- hibernate 多对多关系总结
hibernate中,对对象关系的映射处理估计是最让人迷惑和头疼的,特别是cascade和inverse属性的使用,不知已经杀死了我多少个脑细胞了,好记性永远比不上烂笔头,为了能节省自己的脑细胞,降低 ...
- 蓝桥杯-骰子游戏-java
/* (程序头部注释开始) * 程序的版权和版本声明部分 * Copyright (c) 2016, 广州科技贸易职业学院信息工程系学生 * All rights reserved. * 文件名称: ...
- yum 安装vim编辑器
在我们使用的vi编辑器中没有配色不是很好用,我们安装一个vim富文本编辑器方便我们的文本编辑. [root@localhost ~]# yum install vim -y已加载插件:fastestm ...