js瀑布流
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box {
margin: 0 auto;
width: 966px;
overflow: hidden;
}
#box ul {
width: 300px;
height: auto;
float:left;
margin-right: 20px;
border: #000 1px solid;
}
#box ul li {
width: 280px;
border: #999 1px solid;
margin: 10px 9px;
}
</style>
<script>
function rnd(n,m){
return parseInt(Math.random() * (m - n) + n);
}
function createLi(){
var oLi = document.createElement('li');
oLi.style.height = rnd(50,300) + 'px';
oLi.style.background = 'rgb('+rnd(0,256)+','+rnd(0,256)+','+rnd(0,256)+')';
return oLi;
}
window.onload = function(){
var oBox = document.getElementById('box');
var aUl = oBox.children;
function appendLi(){
for(var i = 0; i < 15; i++){
var oLi = createLi();
var iMinUl;
var arrUl = [];
for(var j = 0; j < aUl.length; j++){
arrUl[j] = aUl[j];
}
arrUl.sort(function(n1,n2){
return n1.offsetHeight - n2.offsetHeight;
});
arrUl[0].appendChild(oLi);
}
}
appendLi();
window.onscroll = function(){
var oScroll = document.documentElement.scrollTop || document.body.scrollTop;
var clientH = document.documentElement.clientHeight;
var oBoxh = oBox.scrollHeight;
if(oScroll + clientH >= oBoxh){
appendLi();
}
}
}
</script>
</head>
<body>
<div id="box">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
</body>
</html>
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" /> < ...
- js瀑布流（定位法）
1.首先,自己写好图片路径,引入jquery <!DOCTYPE html> <html> <head> <meta charset="utf-8& ...
- JS瀑布流效果
本篇内容实现类似百度图片的呈现功能,瀑布流+自动加载 index13.html <!DOCTYPE html> <html> <head> <meta cha ...
- 比较容易理解的---原生js瀑布流
最近一直在恶补基础JS H5 CSS3的基础知识 关于这个瀑布流: 本来打算看着教程来做的. 不过 感觉理解起来有点复杂. SO, 自己参考教程默写了一个.. 目前我所接触过的瀑布流布局分为2大类 主 ...
- 关于瀑布流的布局原理分析（纯CSS瀑布流与JS瀑布流）
瀑布流 又称瀑布流式布局,是比较流行的一种网站页面布局方式.即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置. 为什么使用瀑 ...
- 原声JS瀑布流加延迟载入
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 让dede运行php代码和mysql语句
一.dede运行php代码 举例1: {dede:name runphp='yes'} $str = "hello ";@me = $str;@me .= "world& ...
- Final-阶段站立会议2
组名:天天向上 组长:王森 组员:张政.张金生.林莉.胡丽娜 代码地址:HTTPS:https://git.coding.net/jx8zjs/llk.git SSH:git@git.coding.n ...
- 50分钟学会Laravel 50个小技巧
50分钟学会Laravel 50个小技巧 时间 2015-12-09 17:13:45 Yuansir-web菜鸟 原文 http://www.yuansir-web.com/2015/12/09 ...
- [原创]CI持续集成系统环境---部署gerrit环境完整记录
开发同事提议在线上部署一套gerrit代码审核环境,不用多说,下面就是自己部署gerrit的操作记录. 提前安装好java环境,mysql环境,nginx环境 测试系统:centos6.5 下载下面三 ...
- Objective-C 在Categroy中创建属性(Property)
Objective-c中category是不能直接创建属性的,这时候我们要用到Objc的runtime来实现 用到的方法有两个 一个是get方法 一个set方法 //get方法objc_getAsso ...
- [troubleshoot][archlinux][bcache] 修改linux文件系统 / 分区方案 / 做混合硬盘 / 系统转生大！手！术！（调整底层架构，不！重！装！）
目标: 我要做的事情是:修改文件系统,硬盘分区方案,但是不重装系统,整个操作不被应用层感知. 背景: 我的笔记本 ThinkPad T450.8G内存 + 16GB SSD + 1TB HDD.预装w ...
- freebsd|odoo - 为odoo报表 安装文泉译中文字体
来源: Odoo8.0中使用文泉译中文字体 http://blog.csdn.net/vnsoft/article/details/40056935 FreeBSD wkhtmltop ...
- 如何真正抓住微信小程序的红利？ 阿禅知乎live总结
微信App定义 为满足用户某种开发需求.完全基于微信的消息或网页应用,入口是公众号,用户无需离开微信即可完成所有操作,所有需求都在公众号里被满足 微信App的优势 1. 顾客在哪里,就让顾客在哪里看到 ...
- discuz安装
1.upload文件复制到根目录下,访问,安装 2.数据库需要提前建好 3.数据库地址默认是localhost,我安装时是127.0.0.1 4.最好在本地安装时,配置本地域名和线上域名一样,不然迁移 ...
- 转载 Servlet3.0中使用注解配置Servle
转载地址:http://www.108js.com/article/article10/a0021.html?id=1496 开发Servlet3的程序需要一定的环境支持.Servlet3是Java ...