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上 ...
随机推荐
- swift设计模式学习 - 装饰模式
移动端访问不佳,请访问我的个人博客 设计模式学习的demo地址,欢迎大家学习交流 装饰模式 在不必改变原类文件和使用继承的情况下,动态地扩展一个对象的功能.它是通过创建一个包装对象,也就是装饰来包裹真 ...
- LVS-net
一.LVS基本情况 lvs:Linux Virtual Server,是一种负载均衡集群,其主要是由工作在内核的ipvs与用户空间的命令行工具ipvsadm组成.支持TCP,UDP,AH,EST,AH ...
- codeforces 578c - weekness and poorness - 三分
2017-08-27 17:24:07 writer:pprp 题意简述: • Codeforces 578C Weakness and poorness• 给定一个序列A• 一个区间的poornes ...
- sonar总结--
maven的setting.xml 配置 https://www.cnblogs.com/javawebsoa/p/3206504.html
- zpar使用方法之Chinese Word Segmentation
第一步在这里: http://people.sutd.edu.sg/~yue_zhang/doc/doc/qs.html 你可以找到这句话, 所以在命令行中分别敲入 make zpar make zp ...
- Jsonnet-PHP v1.3.0 发布，支持 PHP 7 使用 Jsonnet
JsonNet-PHP 是 Google Jsonnet 对 PHP的支持扩展. pecl: http://pecl.php.net/package/jsonnet github: https://g ...
- 安装fcitx
设置好软件源后,终端执行: sudo apt-get install fcitx fcitx-ui-* fcitx-sunpinyin fcitx-googlepinyin fcitx-pinyin ...
- CentOS 7.2下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1
一.安装前的准备工作 1.yum update #更新系统 2.yum install gcc gcc-c++ autoconf automake cmake bison m4 libxml2 ...
- R读取一个数据框 Dataframe，删去其中的某一列
可以参考:http://blog.sina.com.cn/s/blog_80572f5d0101anxw.html
- 011PHP基础知识——运算符（四）
<?php /** * 连接运算符: . 连接2个参数生成新的字符串: */ /*$str="中国"; $bbs="bbs.blog.com"; $new ...