当前位置：网站首页>Waterfall layout JS positioning
Waterfall layout JS positioning
2022-04-22 06:43:00 【Bring in the red moon】
Waterfall flow layout The code can be used as a reference Make changes according to your actual situation
<!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;
}
/* Palace layout grid-column-gap: 10px; This is just a preview of the width No impact on final results */
.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, // The number of columns This corresponds to the layout of the palace grid grid-template-columns: repeat(5, 1fr);
colHeightArray: [], // An array that holds the height of each column A horizontal row
lock: false // Paging lock
},
created() {
// Set the initial First column position The default is 0 The first row must also be 0
for(var i = 0; i < this.colCount; i++) {
this.colHeightArray[i] = 0;
}
// Scroll to the bottom page
window.addEventListener('scroll', () => {
var scr = document.documentElement.scrollTop || document.body.scrollTop; // The height of the part that rolls up
var clientHeight = document.documentElement.clientHeight; // Screen height is the visual height you see when the current device is static
var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // The actual height of the entire web page , compatible Pc End
if(scr + clientHeight + 10 >= scrHeight) {
if(this.lock)
return
this.lock = true
this.list = [...this.list, ...images]
}
});
},
methods: {
// Monitoring picture loading completed
imgLoad(e) {
// Get current element
let el = e.currentTarget
// Get the lowest height Initially, the above has been set to 0
var minHeight = this.colHeightArray[0];
// Subscript of the lowest element in height
var minIndex = 0;
// Loop current column Get the lowest height and the subscript of the lowest height element
for(var i = 0; i < this.colCount; i++) {
if(this.colHeightArray[i] < minHeight) {
minHeight = this.colHeightArray[i];
minIndex = i;
}
}
// Dynamic reset Element location
$(el).parent().css({
// Set up location
position: 'absolute',
// The distance from the element to the left that 10 For spacing It can be adjusted by itself and css in grid-column-gap: 10px; It means the same thing
left: minIndex * ($(el).parent().width() + (minIndex != 0 ? 10 : 0)),
// Distance from the top
top: minHeight,
// Reset width grid The layout needs to be reset If you write dead, you don't need to
width: $(el).parent().width(),
})
$(el).css({
opacity:1
})
// Unlock the paging lock
if($(el).parent().index() == this.list.length - 1) {
this.lock = false
}
// To reset An array that holds the height of each column
this.colHeightArray[minIndex] += $(el).parent().outerHeight(true)
}
}
})
</script>
</body>
</html>images data （ Or find it yourself ）
var images = [{
src: 'https://game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-4.jpg',
text: ' Sirius painted dreamer '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-3.jpg',
text: ' Liang Zhu '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-2.jpg',
text: ' Xiuzhu Mohist '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/513/513-bigskin-1.jpg',
text: ' Jinghong's pen '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-1.jpg',
text: ' Solitary hunting '
},
{
src: 'https://pic2.52pk.com/files/190419/7913716_103558_1_lit.jpg',
text: ' Yao Mei '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/528/528-bigskin-2.jpg',
text: ' Shark blade '
},
{
src: 'https://pic2.52pk.com/files/190419/7913716_103610_1_lit.jpg',
text: ' Yao Mei '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-1.jpg',
text: ' The blade of the broken mirror '
},
{
src: 'https://up.enterdesk.com/edpic/09/27/bb/0927bb0c7831705c2123d5f481f7761b.jpg',
text: ' Luna Zixia fairy '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-2.jpg',
text: ' Ice blade Wonderland '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/531/531-bigskin-3.jpg',
text: ' Blazing sun and divine light '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-3.jpg',
text: ' Shenwei '
},
{
src: 'https://up.enterdesk.com/edpic/d6/be/a7/d6bea7953a832383937b5a95cb21bacb.jpg',
text: ' Street Fighter '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-2.jpg',
text: ' Survivor '
},
{
src: 'https://up.enterdesk.com/edpic/80/e7/28/80e7287dfc378f23cd495bb2090d651f.jpg',
text: ' White dragon chant '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/518/518-bigskin-1.jpg',
text: ' Leng Hui's gun '
},
{
src: 'https://up.enterdesk.com/edpic/c1/45/fc/c145fcb10e8ac99dd2cd94d686b602ee.jpg',
text: ' Miyamoto Musashi, eye of hell '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-3.jpg',
text: ' Cloud puppet show '
},
{
src: 'https://up.enterdesk.com/edpic/f8/ea/79/f8ea79b40880e7b2eeeb31b81ff039f9.jpg',
text: ' Cai Wenji's natural string sound '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-2.jpg',
text: ' Midnight Opera House '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/125/125-bigskin-1.jpg',
text: ' Endless puppet '
},
{
src: 'https://up.enterdesk.com/edpic/18/63/5d/18635de8c11372bb3f3820c4b5266c39.jpeg',
text: ' Wang Zhaojun, I'm a singer '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-6.jpg',
text: ' Feiheng '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-5.jpg',
text: ' The shadow of dreams '
},
{
src: 'https://up.enterdesk.com/edpic/79/34/a5/7934a552d1152c99554ab31ab7b2bc1d.jpg',
text: ' Sun Bin's future trip '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-4.jpg',
text: ' White dragon chant '
},
{
src: 'https://up.enterdesk.com/edpic/20/0e/86/200e863afeadfb9a17620997651046eb.jpeg',
text: ' Genghis Khan is a wolf descendant '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-3.jpg',
text: ' The Vatican envoy '
},
{
src: 'https://up.enterdesk.com/edpic/a3/a0/2c/a3a02c9814cae45f190bbee1db811da1.jpg',
text: ' Lanling King Assassin's Creed '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-2.jpg',
text: ' Street Fighter '
},
{
src: 'https://up.enterdesk.com/edpic/8c/ec/73/8cec7372c5415d24d3a76a58fce0288a.jpg',
text: ' Baiqi's final weapon '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/150/150-bigskin-1.jpg',
text: ' a state scholar of no equal '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-4.jpg',
text: ' Zhu quezhi '
},
{
src: 'https://up.enterdesk.com/edpic/3e/e4/4e/3ee44e9f9c0fb551a31ff899e6ae829a.jpeg',
text: ' The blade skin of Mulan legend '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-3.jpg',
text: ' Agent phantom '
},
{
src: 'https://up.enterdesk.com/edpic/e0/dc/42/e0dc420df3f31fc1d045b9f26525e4b5.jpeg',
text: ' Sun Shangxiang rose skin '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-2.jpg',
text: ' The ghost gun '
},
{
src: 'https://up.enterdesk.com/edpic/0b/79/c3/0b79c31bbf32d0b41d35d83d2084d562.jpg',
text: ' Dharma boxing emperor '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/196/196-bigskin-1.jpg',
text: ' The eyes of silence '
},
{
src: '//game.gtimg.cn/images/yxzj/img201606/skin/hero-info/163/163-bigskin-2.jpg',
text: ' genie '
}
];版权声明
本文为[Bring in the red moon]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/04/202204220556230625.html
边栏推荐
- How to set the size of a window in a window function
- 一套sql语句同时支持Oracle跟Mysql？
- The difference between watch and computed
- EXCEL 利用替换、分列、填充功能综合整理财务数据
- Copu helped Peking University Graduate open source public elective course - Open Source PostgreSQL R & D course successfully enter Peking University
- MySQL——索引
- 创新实训（九）整合
- 小程序自定义原生底部导航
- Solve the problem of error in installing PostgreSQL under windows2012 R2
- uniapp自定义底部导航栏h5有效果小程序无效的解决方案
猜你喜欢
小程序自定义原生底部导航
ArcGIS 基于TIN地表面数据和建筑数据进行视域分析
Escort · the future 𞓜 digital risk control summit of digital America 2022 officially set off
Use PG_ STAT_ Replication monitoring replication
uglifyjs压缩JS
EXCEL IF、AND以及OR函数的嵌套使用
EXCEL 利用替换、分列、填充功能综合整理财务数据
Shumei technology has obtained the international certification of ISO / IEC 27701 privacy information management system
ArcMAP TIN与栅格DEM的坡度坡向对比分析
ArcGIS 观景点视域分析
随机推荐
Cancel password after excel worksheet forgets password
calendar.getActualMaximum(calendar.DAY_OF_MONTH)的坑点
获取日期之间的天数、获取中文日期、获得日期的下一个星期一的日期、获取工作日、获取休息日
Introduction to postgreshub Chinese resource network
EXCEL 保护工作表、工作薄不被破坏
The digital risk control summit of digital America 2022 was opened, and the five highlights were exposed in advance
Multiple styles of scroll bars
ArcGIS 纵断面分析
EXCEL IF、AND以及OR函数的嵌套使用
MySQL——一条语句的执行流程和原理
EXCEL VLOOKUP函数的使用
JS encodes and decodes the URL (the difference between the three methods)
每日一题——寻找小于目标数的最大单调递增数
Uniapp solves the home page. Click return (mobile phone return key) to jump to the login page
js引擎的循环机制：同步，异步，事件循环
Iframe child parent pass parameter
A set of SQL statements supports both Oracle and MySQL?
ArcMAP TIN与栅格DEM的坡度坡向对比分析
区间列表的交集
To summarize the timers I've used: @ scheduled annotation