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上 ...
随机推荐
- iOS开发进阶 - 自定义UICollectionViewLayout实现瀑布流布局
移动端访问不佳,请访问我的个人博客 最近项目中需要用到瀑布流的效果,但是用UICollectionViewFlowLayout又达不到效果,自己动手写了一个瀑布流的layout,下面是我的心路路程 先 ...
- BZOJ 3192: [JLOI2013]删除物品 奇淫技巧&树状数组
点我看题 这题十分奇淫技巧...QAQ因为知道是树状数组的题QAQ刚开始以为维护两个数组的树状数组然后模拟从大到小,然后发现不会打QAQ 于是悄悄咪咪翻开题解了. 实际上两个数组可以看做一个数组 如 ...
- DataStage系列教程 （Slowly Changing Dimension）缓慢变化维
BI中维表的增量更新一般有2种: Type 1:覆盖更改.记录的列值发生变化,直接update成最新记录. Type 2:历史跟踪更改.记录值发生变化,将该记录置为失效,再insert一条新的记录. ...
- JAVA 单向链表
package com.session.link; /** * 单向链表 */public class LinkedList<T> { private Node head;//指向链表头节 ...
- Ubuntu+apache安装redmin
公司要迁移redmin,本来以为是一个很简单的项目,想不到整整搞了一天加一个晚上. 首先是对ruby的安装不熟悉,现在明白了ruby的安装顺序是先安装rvm版本管理,然后用rvm安装ruby,安装好后 ...
- 浅谈C#泛型的定义、继承、方法和约束
摘要:本文介绍了如何定义一个C#泛型类,以及实现泛型类的继承.方法和约束. C#泛型参数化了类型,把类型作为参数抽象出来,从而使我们在实际的运用当中能够更好的实现代码的重复利用,同时它提供了更强的类型 ...
- 锁（1）-- java锁
前言: 锁分3种:java锁.分布式锁.DB锁 在读很多并发文章中,会提及各种各样锁如公平锁,乐观锁等等,这篇文章介绍各种锁的分类.介绍的内容如下: 公平锁/非公平锁 可重入锁 独享锁/共享锁 互斥锁 ...
- bash-文件表达式
一点例子: #!/bin/bash # test-file: Evaluate the status of a file FILE=~/.bashrc if [ -e "$FILE" ...
- Struts2框架学习第三章——Struts2基础
本章要点 — Struts 1框架的基本知识 — 使用Struts 1框架开发Web应用 — WebWork框架的基本知识 — 使用WebWork框架开发Web应用 — 在Eclipse中整合To ...
- 上传网站后建议执行：chown www:www -R /path/to/dir 对网站目录进行权限设置，/path/to/dir替换为你网站目录。
上传网站后建议执行:chown www:www -R /path/to/dir 对网站目录进行权限设置,/path/to/dir替换为你网站目录.