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上 ...
随机推荐
- RedHat5.4 使用 centOS5源更新
1.卸载HedHat5.4的yum命令 先查看RedHat上是否安装yum 删除所有的yum软件 rpm -qa | grep yum | xargs rpm - ...
- 动态规划dp专题练习
貌似开坑还挺好玩的...开一个来玩玩=v=... 正好自己dp不是很熟悉,就开个坑来练练吧...先练个50题?小目标... 好像有点多啊QAQ 既然是开坑,之前写的都不要了! 50/50 1.洛谷P3 ...
- LeetCode——minimum-path-sum
Question Given a m x n grid filled with non-negative numbers, find a path from top left to bottom ri ...
- 自学Java测试代码二String， StringBuffer
2017-08-23 10:38:01 writer:pprp package test; import java.util.*; public class test2 { public static ...
- Mysql建表好的例子
1. DROP TABLE IF EXISTS `sys_warehouse_area`;CREATE TABLE `sys_warehouse_area` ( `id` bigint(20) NOT ...
- Python基础笔记系列八：字符串的运算和相关函数
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 字符串的运算1.字符串的加法和乘法 python中不但支持字符串相加,还支 ...
- Gray Code，求格林码
问题描述: The gray code is a binary numeral system where two successive values differ in only one bit. G ...
- ionic+cordova 学习开发App（一）
一.项目所需环境 (一)jdk 1.jdk的安装,必须同时包含Java 和javac [一般安装包中都包含有,可以确定下] (二)node.js 和NPM 1.大多插件和辅助工具都运行在NPm平台上. ...
- uva109求凸包面积，判断点是不是在凸包内
自己想了一个方法判断点是不是在凸包内,先求出凸包面积,在求由点与凸包上每两个点之间的面积(点已经排好序了),如果两者相等,则点在凸包内,否则不在(时间复杂度可能有点高)但是这题能过 #include& ...
- Hibernate[延迟加载] [三种状态] [脏检查] [缓存机制]
一.持久化对象的唯一标识 java中按内存地址不同区分同一个类的不同对象,关系数据库用主键区分同一条记录,Hibernate使用OID来建立内存中的对象和数据库中记录的对应关系 什么是OID? 解析: ...