js之瀑布流的实现
.gif)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.onload_circle { position: fixed;
top: 50%;
left: 50%;
margin-top: -26px;
margin-left: -26px;
width: 50px;
height: 50px;
border: 1px solid orange;
border-radius: 50%;
transform-origin: center center;
animation: rotate 1s infinite linear;
transition: all 1s;
} .ball {
display: inline-block;
width: 6px;
height: 6px; border-radius: 50%;
position: absolute;
left: -3px;
top: 23px;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body style="">
<div class="onload_circle">
<span class="ball"></span>
</div>
</body>
</html>
const data = [
{
url: 'images/1.jpg',
width: 432,
height: 300,
},
{
url: 'images/2.jpg',
width: 681,
height: 966,
},
{
url: 'images/3.jpg',
width: 480,
height: 300,
},
{
url: 'images/4.jpg',
width: 480,
height: 300,
},
{
url: 'images/5.jpg',
width: 683,
height: 1024,
},
{
url: 'images/6.jpg',
width: 682,
height: 1024,
},
{
url: 'images/7.jpg',
width: 1000,
height: 1500,
},{
url: 'images/8.jpg',
width: 677,
height: 966,
},{
url: 'images/9.jpg',
width: 667,
height: 1000,
},{
url: 'images/10.jpg',
width: 400,
height: 300,
}
];
window.onload = function () {
let oBox = document.getElementById('box');
let aPanel = Array.from(oBox.children);
const iPanelW = aPanel[0].offsetWidth; // 记录列的宽度
const iImgW = 220;
// 计算最多容纳列数
let iWinW = document.documentElement.clientWidth;
let iWinH = document.documentElement.clientHeight;
let iMaxCol = Math.floor(iWinW / iPanelW);
// 指定box的宽度
oBox.style.width = iMaxCol * iPanelW + 'px';
// 记录每一列的高度
let aColH = [];
// 遍历指定位置
aPanel.forEach((v, k) => {
// 如果当前panel为第一排，则top为0
if(k < iMaxCol) {
v.style.top = 0;
v.style.left = k * iPanelW + 'px';
// 记录每一列的高度
aColH.push(v.offsetHeight);
} else {
// 寻找最矮列的高度值和下标
var iMinH = Math.min(...aColH);
var iMinK = aColH.indexOf(iMinH);
// 指定位置
v.style.left = iMinK * iPanelW + 'px';
v.style.top = iMinH + 'px';
// 更新列的高度
aColH[iMinK] += v.offsetHeight;
}
});
// 滚动加载新的数据
var loadOK = true; // 可以加载新的数据
window.onscroll = function () {
let iScrollT = document.body.scrollTop || document.documentElement.scrollTop;
let oLastPanel = aPanel[aPanel.length - 1];
if(loadOK && (iWinH + iScrollT > oLastPanel.offsetTop + oLastPanel.offsetHeight / 2)) {
loadOK = false;
// 加载新的数据
data.forEach(v => {
let oNewPanel = document.createElement('div');
oNewPanel.className = 'panel';
// 创建IMG
let oNewImg = document.createElement('img');
oNewImg.src = v.url;
// 计算图片等比缩放后实际的高度
// 公式：iActualW / iActualH = iScaleW / iScaleH
let iImgH = v.height * iImgW / v.width;
oNewImg.style.height = iMinH + 'px';
oNewPanel.appendChild(oNewImg);
oBox.appendChild(oNewPanel);
// 寻找最矮列的高度值和下标
var iMinH = Math.min(...aColH);
var iMinK = aColH.indexOf(iMinH);
oNewPanel.style.left = iMinK * iPanelW + 'px';
oNewPanel.style.top = iMinH + 'px';
// 更新列的高度
aColH[iMinK] += oNewPanel.offsetHeight;
});
// 更新最后的列
aPanel = Array.from(oBox.children);
// 打开开关
loadOK = true;
}
};
window.onresize = function () {
// 更新视窗的宽度和高度
iWinW = document.documentElement.clientWidth;
iWinH = document.documentElement.clientHeight;
// 更新列数
iMaxCol = Math.floor(iWinW / iPanelW);
// 更新box的宽度
oBox.style.width = iMaxCol * iPanelW + 'px';
// 重新排版
aColH = [];
// 遍历指定位置
aPanel.forEach((v, k) => {
// 如果当前panel为第一排，则top为0
if(k < iMaxCol) {
v.style.top = 0;
v.style.left = k * iPanelW + 'px';
// 记录每一列的高度
aColH.push(v.offsetHeight);
} else {
// 寻找最矮列的高度值和下标
var iMinH = Math.min(...aColH);
var iMinK = aColH.indexOf(iMinH);
// 指定位置
v.style.left = iMinK * iPanelW + 'px';
v.style.top = iMinH + 'px';
// 更新列的高度
aColH[iMinK] += v.offsetHeight;
}
});
};
};
js之瀑布流的实现的更多相关文章
- 用js实现瀑布流的一种简单方法
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- 原生JS实现瀑布流
浏览网页的时候经常会遇到瀑布流布局的网站.也许有些读者不了解瀑布流.瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数 ...
- js实现瀑布流的一种简单方法实例分享
现在说瀑布流式布局似乎有点晚了,但是每一项技术都是向着“精”和“简”的方向在不断发展,在发展到极致之前,需要一个相当漫长的过程,因此,从这个角度来说,当瀑布流被应用得越来越多的时候,反而更应该讨论它, ...
- 手把手教你js原生瀑布流效果实现
手把手教你js原生瀑布流效果实现 什么是瀑布流效果 首先,让我们先看一段动画: 在动画中,我们不难发现,这个动画有以下特点: 1.所有的图片的宽度都是一样的 2.所有的图片的高度是不一样的 3.图片一 ...
- [JS练习] 瀑布流照片墙
记录JS实现瀑布流照片墙效果 首先是前端页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- bootstrap+masonry.js写瀑布流
最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...
- 多栏布局与JS实现瀑布流
css3属性之多栏布局与JS实现瀑布流 背景:之前打算自己总结一下flex布局的知识点,发现自己无从下手,原因在何处:我反思了一下,其实原因很简单,使用的次数少,更多的时间使用了百分比,浮动和定位解决 ...
- js插件---瀑布流Masonry
js插件---瀑布流Masonry 一.总结 一句话总结:还是要去看官网,比amazeui上面介绍的详细很多 1.瀑布流的原理是什么? 给外层套好相对定位,里面的每一个弄好绝对定位,然后计算出每一个的 ...
- js原生瀑布流
背景: 1.在移动端开发,jq文件是显得非常庞大的,所以所有效果尽量用HTML5和原生js实现. 2.本次瀑布流是固定列数,采用非浮动的另外一种瀑布流思想实现的. 3.本次数据来源是json接口 4. ...
- vue.js实现瀑布流之vue-waterfall-easy
想必大家应该很多都已经习惯了jquery的DOM操作,jquery的瀑布流实现起来也很容易. 但是,随着时代的发展,随着时代的进步..... 算了算了,扯远了,既然能找到这儿来,肯定是在vue.js上 ...
随机推荐
- layui和bootstrap 对比
layui和bootstrap 对比 这两个都属于UI渲染框架. layui是国人开发的一套框架,2016年出来的,现在已更新到2.X版本了.比较新,轻量级,样式简单好看. bootstrap 相对来 ...
- 【ROI Pooling】ROI Pooling层详解（转）
原文链接:https://blog.deepsense.ai/region-of-interest-pooling-explained/ 目标检测typical architecture 通常可以分为 ...
- 解题报告：hdu1257 LIS裸题
2017-09-02 17:28:44 writer:pprp 那个裸题练练手,讲解在之前的博客中提到了 代码如下: /* @theme:hdu1257 @writer:pprp @begin:17: ...
- docker shipyard 问题
安装 docker shipyard curl -s https://shipyard-project.com/deploy | bash -s docker machine 创建的虚拟机无法直接运 ...
- 分析java进程假死状况
摘自: http://www.myexception.cn/internet/2044496.html 分析java进程假死情况 1 引言 1.1 编写目的 为了方便大家以后发现进程假死的时候能够正常 ...
- 检签 sub sup应用
<html> <body> <b>This text is bold</b> <br /> <strong>This text ...
- 【小而优】 如何实现 tail -f 动态显示日志时高亮显示关键字
前言 如果你在linux下工作,那用tail -f跟踪一个日志文件的输出内容应该是家常便饭了. 但是,有时你更关心的是一些敏感字词,希望能够在动态跟踪的同时,把这些字词高亮出来,比如日志中的 ERRO ...
- Java 类的构造器的调用顺序
规则如下: 对于一个复杂的对象,构建器的调用遵照下面的顺序: (1) 调用父类构建器.这个步骤会不断重复下去,首先得到构建的是分级结构的根部,然后是下一个子类,等等.直到抵达最深一层的子类. (2) ...
- iometer测试磁盘IO性能
of Outstanding I/Os per target – 被选中worker的每个磁盘一次所允许的未处理的异步I/O的数量.模拟测试多个应用向 IO 请求读写,默认是 1.通常不用这个参数,除 ...
- guava的事件发布订阅功能
事件的重要性,不用说很重要,在很多时候我们做完一个操作的时候,需要告知另外一个对象让他执行相应操作,比如当用户注册成功的时候,需要抛出一个注册成功的事件,那么有监听器捕获到这个事件,完成后续用户信息初 ...