当前位置：网站首页>瀑布流布局 js定位
瀑布流布局 js定位
2022-04-22 05:57:00 【招来红月】
瀑布流布局 代码可当做参考 根据自己的实际状况做下修改
<!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>
<script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
#app {
max-width: 900px;
margin: 0 auto;
border: 1px solid #f00;
height: 50px;
padding-top: 300px;
}
/*宫格布局 grid-column-gap: 10px; 这个只是预览是宽度 不影响最终结果*/
.list {
position: relative;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 10px;
}
.item {
margin-bottom: 10px;
}
.item img {
width: 100%;
display: block;
margin: 0 auto;
opacity: 0.1;
transition: opacity 1s;
}
.item div {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<div class="list">
<div v-for="item in list" class="item" v-if="item.src">
<img :src="item.src" alt="" @load="imgLoad($event)" />
<div>{
{item.text}}</div>
</div>
</div>
</div>
<script type="text/javascript">
// vue
var app = new Vue({
el: '#app',
data: {
list: images,
colCount: 5, //列的数量 这里和宫格布局时相互对应 grid-template-columns: repeat(5, 1fr);
colHeightArray: [], // 存放每一列的高度的数组 横向一排
lock: false //分页锁
},
created() {
//设置初始 首列位置 默认为0 第一排也必须为0
for(var i = 0; i < this.colCount; i++) {
this.colHeightArray[i] = 0;
}
//滚动到底部分页
window.addEventListener('scroll', () => {
var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滚动的那一部分高度
var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是当前设备静态下你所看到的视觉高度
var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整个网页的实际高度，兼容Pc端
if(scr + clientHeight + 10 >= scrHeight) {
if(this.lock)
return
this.lock = true
this.list = [...this.list, ...images]
}
});
},
methods: {
//监听图片加载完成
imgLoad(e) {
//获取当前元素
let el = e.currentTarget
//获取最低的那个高度 初始时上面已设置为0
var minHeight = this.colHeightArray[0];
//高度最低元素的下标
var minIndex = 0;
//循环当前列 获取最低高度和最低高度元素的下标
for(var i = 0; i < this.colCount; i++) {
if(this.colHeightArray[i] < minHeight) {
minHeight = this.colHeightArray[i];
minIndex = i;
}
}
//动态重置 元素位置
$(el).parent().css({
//设置 定位
position: 'absolute',
//元素距离左侧的距离 那个10为间距 可自行调整 和css中grid-column-gap: 10px; 意思相同
left: minIndex * ($(el).parent().width() + (minIndex != 0 ? 10 : 0)),
//距离顶部的距离
top: minHeight,
//重设宽度 grid布局需要重新设置 写死的话择不需要
width: $(el).parent().width(),
})
$(el).css({
opacity:1
})
//解开分页锁
if($(el).parent().index() == this.list.length - 1) {
this.lock = false
}
//重新设置 存放每一列的高度的数组
this.colHeightArray[minIndex] += $(el).parent().outerHeight(true)
}
}
})
</script>
</body>
</html>images 数据（或者自行查找）
var images = [{
src: 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-4.jpg',
text: '天狼绘梦者'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-3.jpg',
text: '梁祝'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-2.jpg',
text: '修竹墨客'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-1.jpg',
text: '惊鸿之笔'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-1.jpg',
text: '孤猎'
},
{
src: 'https://pic2.52pk.com/files/190419/7913716_103558_1_lit.jpg',
text: '瑶妹'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-2.jpg',
text: '鲨之猎刃'
},
{
src: 'https://pic2.52pk.com/files/190419/7913716_103610_1_lit.jpg',
text: '瑶妹'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-1.jpg',
text: '破镜之刃'
},
{
src: 'https://up.enterdesk.com/edpic/09/27/bb/0927bb0c7831705c2123d5f481f7761b.jpg',
text: '露娜紫霞仙子'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-2.jpg',
text: '冰刃幻境'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-3.jpg',
text: '炽阳神光'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-3.jpg',
text: '神威'
},
{
src: 'https://up.enterdesk.com/edpic/d6/be/a7/d6bea7953a832383937b5a95cb21bacb.jpg',
text: '街头霸王'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-2.jpg',
text: '幸存者'
},
{
src: 'https://up.enterdesk.com/edpic/80/e7/28/80e7287dfc378f23cd495bb2090d651f.jpg',
text: '白龙吟'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-1.jpg',
text: '冷晖之枪'
},
{
src: 'https://up.enterdesk.com/edpic/c1/45/fc/c145fcb10e8ac99dd2cd94d686b602ee.jpg',
text: '宫本武藏地狱之眼'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-3.jpg',
text: '云间偶戏'
},
{
src: 'https://up.enterdesk.com/edpic/f8/ea/79/f8ea79b40880e7b2eeeb31b81ff039f9.jpg',
text: '蔡文姬天籁弦音'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-2.jpg',
text: '午夜歌剧院'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-1.jpg',
text: '无间傀儡'
},
{
src: 'https://up.enterdesk.com/edpic/18/63/5d/18635de8c11372bb3f3820c4b5266c39.jpeg',
text: '王昭君我是歌手'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-6.jpg',
text: '飞衡'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-5.jpg',
text: '逐梦之影'
},
{
src: 'https://up.enterdesk.com/edpic/79/34/a5/7934a552d1152c99554ab31ab7b2bc1d.jpg',
text: '孙膑未来之旅'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-4.jpg',
text: '白龙吟'
},
{
src: 'https://up.enterdesk.com/edpic/20/0e/86/200e863afeadfb9a17620997651046eb.jpeg',
text: '成吉思汗苍狼末裔'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-3.jpg',
text: '教廷特使'
},
{
src: 'https://up.enterdesk.com/edpic/a3/a0/2c/a3a02c9814cae45f190bbee1db811da1.jpg',
text: '兰陵王刺客信条'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-2.jpg',
text: '街头霸王'
},
{
src: 'https://up.enterdesk.com/edpic/8c/ec/73/8cec7372c5415d24d3a76a58fce0288a.jpg',
text: '白起最终兵器'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-1.jpg',
text: '国士无双'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-4.jpg',
text: '朱雀志'
},
{
src: 'https://up.enterdesk.com/edpic/3e/e4/4e/3ee44e9f9c0fb551a31ff899e6ae829a.jpeg',
text: '花木兰传说之刃皮肤'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-3.jpg',
text: '特工魅影'
},
{
src: 'https://up.enterdesk.com/edpic/e0/dc/42/e0dc420df3f31fc1d045b9f26525e4b5.jpeg',
text: '孙尚香蔷薇玫瑰皮肤'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-2.jpg',
text: '绝影神枪'
},
{
src: 'https://up.enterdesk.com/edpic/0b/79/c3/0b79c31bbf32d0b41d35d83d2084d562.jpg',
text: '达摩拳皇'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-1.jpg',
text: '静谧之眼'
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/163/163-bigskin-2.jpg',
text: '修罗'
}
];版权声明
本文为[招来红月]所创，转载请带上原文链接，感谢
https://blog.csdn.net/divpoxiao/article/details/121402609
边栏推荐
- 从零开始学安卓（kotlin）五——UI
- Digital beauty technology won the "top ten intelligent risk control management innovation award" of the banker
- API慢接口分析
- How can enterprise risk control build four systems to achieve overall prevention and control?
- Usage rules of cast function in MySQL
- 8张图让你一步步看清 async/await 和 promise 的执行顺序
- 使用kubeadm安装kuberneters
- 《通用数据保护条例》(GDPR)系列解读一：如何判断出海企业是否受GDPR管辖？
- The minors protection solution of digital beauty technology is heavily launched, opening a new era of minors' network escort
- 小程序定时任务的多种写法
猜你喜欢
从零开始学安卓（kotlin）一 ——入门
小程序调用扫描二维码功能并跳转到二维码指定的路径
将Chrome浏览器背景设置为护眼色（眼睛护航/darkReader插件）
Heavy! Kyushu cloud won the award of "best partner of operators in 2020"
congratulations! China Mobile Smart Home Center was selected in the list of ICT industry in 2020
LeetCode 1547：切棍子的最小成本
数美科技获得ISO/IEC 27701隐私信息管理体系国际认证
Click to trigger other DOM elements: < $refs, $El >
Solve the problem of error in installing PostgreSQL under windows2012 R2
关于一段小程序的思考
随机推荐
获取日期之间的天数、获取中文日期、获得日期的下一个星期一的日期、获取工作日、获取休息日
Postgreshub中文资源网介绍
LeetCode 1547：切棍子的最小成本
Scenario of PostgreSQL online adjusting the maximum number of connections
指纹支付相关的细节处理
Hangzhou rail transit supervision platform edge cloud won the award and set a new benchmark in the industry
webService接口编写并发布与webService接口的调用（二）
创新实训（十二）爬虫
The difference between hash mode and history mode
Great! Kyushu cloud edge computing management platform has been certified by the national authority
The difference between equalsignorecase() and equals()
《信息系统项目管理师总结》第一章 项目整体管理
为PostgreSQL的表自动添加分区
PostgreSQL中的MVCC 事务隔离
MySQL在面试中经常被问到的经典问题。
从零开始学安卓（kotlin）二——Activity
Shumei technology was honored as the "top 100 scientific and technological innovation of private enterprises in Beijing"
企业风控如何搭建四大体系，实现全局防控？
Iframe child parent pass parameter
将Chrome浏览器背景设置为护眼色（眼睛护航/darkReader插件）