原生js实现的瀑布流布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<style type="text/css">
div{
background: #ccc;
width: 200px;
position: absolute;
transition:0.5s;
}
</style>
</head>
<body> <script type="text/javascript">
createDiv ()
function createDiv () {
for (var i = 0; i < 20; i ++) {
var div = document.createElement('div');
var rnd = Math.floor(Math.random() * 300 + 50); //div的高度在50到350之间
div.style.height = rnd + "px";
div.innerHTML = i;
document.body.appendChild(div);
};
change()
} function change() {
var aDiv = document.getElementsByTagName('div');
// alert(aDiv.length);
var windowCW = document.documentElement.clientWidth; //窗口视口的宽度
var n = Math.floor(windowCW / 210); //一行能容纳多少个div,并向下取整
if (n <= 0) {return};
// alert(n);
var t = 0;
var center = (windowCW - n * 210) / 2; //居中
var arrH = []; //定义一个数组存放div的高度
for (var i = 0; i < aDiv.length; i ++) {
var j = i % n; if (arrH.length == n) { //一行排满n个后到下一行
var min = findMin(arrH); //从最“矮”的排起,可以从下图的序号中看得出来,下一行中序号是从矮到高排列的
aDiv[i].style.left = center + min * 210 + "px";
aDiv[i].style.top = arrH[min] + 10 + "px";
arrH[min] += aDiv[i].offsetHeight + 10;
// alert(min);
}else{
arrH[j] = aDiv[i].offsetHeight;
aDiv[i].style.left = center + 200 * j+10 * j + "px";
aDiv[i].style.top = 0;
} };
}
window.onresize = function(){ //窗口改变也调用函数
change();
}
window.onscroll= function () {
// 页面总高度
var bodyHeight = document.documentElement.offsetHeight;
// 可视区高度
var windowHeight = document.documentElement.clientHeight;
//滚动条的高度
var srcollTop = document.documentElement.scrollTop || document.body.scrollTop;
var srcollH = document.body.scrollHeight;
// alert(srcollH);
if (srcollTop+windowHeight >= srcollH-20) {
createDiv();
};
} function findMin(arr) {
var m = 0;
for (var i = 0; i < arr.length; i ++) {
m = Math.min(arr[m], arr[i]) == arr[m] ? m : i;
}
return m;
}
</script>
</body>
</html>
基本思路:
运用position: absolute来进行定位布局,从第二排开始每次寻找高度最小的位置插入元素
原生js实现的瀑布流布局的更多相关文章
- 原生js实现图片瀑布流布局,注释超详细
完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- 原生 JS 实现一个瀑布流插件
更好的阅读体验,点击 原文地址 瀑布流布局中的图片有一个核心特点 -- 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest.花瓣网等等.那么接下来就基于这个特点开始瀑布流探 ...
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...
- js实现网页瀑布流布局
效果图: html代码实现网页布局: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- 原生js 实现的瀑布流
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JS实现动态瀑布流及放大切换图片效果(js案例)
整理了一下当时学js写的一些案例,再次体验了一把用原生JS实现动态瀑布流效果的乐趣,现在把它整理出来,需要的小伙伴可以参考一下. 该案例主要是用HTML+CSS控制样式,通过JS实现全局瀑布流以及点击 ...
- js 实现图片瀑布流效果,可更改配置参数 带完整版解析代码[waterFall.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS实现图片瀑布流效果 页面需求 1 ...
- 原生JS实现瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...
- JS 瀑布流布局
瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
随机推荐
- 实力封装:Unity打包AssetBundle(二)
→前情提要:Unity最基本的AssetBundle打包方式. 第二种打包方式 Unity提供的BuildAssetBundles API还有一个重载形式,看下面↓↓ public static As ...
- SDK Manager的使用
前言:SDK Manager就是一个Android软件开发工具包管理器,就像一个桥梁,连通本地和服务器,从服务器下载安卓开发所需工具到本地. 1.在android sdk 安装目录下,有一个SDK M ...
- MySQL:用户管理
用户管理部分 一.数据库不安全因素 非授权用户对数据库的恶意存取和破坏: 数据库中重要或敏感的数据被泄露: 安全环境的脆弱性: 二.数据库安全的常用方法 用户标识和鉴别[使用口令鉴别]::该方法由系统 ...
- Python 封装
# 封装: # 1. 对属性的封装 # 2. 对功能的封装 # 3. 模块 # 4. 包 class Student: def __init__(self, num, name, clazz): se ...
- placeholder兼容性问题
由于placeholder是H5新属性,IE9及以下都不支持 解决办法:给input添加一个背景图,背景图里面添加placeholder内容,当焦点落在输入框中,背景图隐藏,即可做出类似的效果 代码: ...
- poj 2251 Dungeon Master (BFS 三维)
You are trapped in a 3D dungeon and need to find the quickest way out! The dungeon is composed of un ...
- [转]RabbitMQ系列(一):Windows下RabbitMQ安装及入门
https://blog.csdn.net/hzw19920329/article/details/53156015 1.Windows下安装RabbitMQ需要以下几个步骤 (1):下载erlang ...
- C 语言经典面试题 —— 宏
1. 运算符优先级与括号 #define Cube(a) a*a*a 无法解决 Cube(1+1) ⇒ 1+1*1+1*1+1 ⇒ 4,期待的应当是 8,故将其改造为 #define Cube(a) ...
- mysql str_to_date 字符串 转日期时间
SELECT STR_TO_DATE('2018-05-05 14:00:00.5555','%Y-%m-%d %H:%i:%s') from DUAL;
- deconvolution layer parameter setting
reference: 1. Paper describes initializing the deconv layer with bilinear filter coefficients and tr ...