瀑布流布局 js定位
2024-05-25 23:23:02
瀑布流布局 代码可当做参考 根据自己的实际状况做下修改
<!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">// vuevar app = new Vue({el: '#app',data: {list: images,colCount: 5, //列的数量 这里和宫格布局时相互对应 grid-template-columns: repeat(5, 1fr); colHeightArray: [], // 存放每一列的高度的数组 横向一排lock: false //分页锁},created() {//设置初始 首列位置 默认为0 第一排也必须为0for(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)returnthis.lock = truethis.list = [...this.list, ...images]}});},methods: {//监听图片加载完成imgLoad(e) {//获取当前元素let el = e.currentTarget//获取最低的那个高度 初始时上面已设置为0var 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: '修罗'}];瀑布流布局 js定位相关推荐
- 纯js实现瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- 原生JS实现无限滚动瀑布流布局
API HTMLElement.offsetWidth 是一个只读属性,返回一个元素的布局宽度.一个典型的(译者注:各浏览器的offsetWidth可能有所不同)offsetWidth是测量包含元素的 ...
- 纯JS实现懒加载+瀑布流布局
瀑布流布局一般用于图片布局,其视觉表现为参差不齐的多栏布局,随着页面的滑动,会不断加载新的图片. 懒加载主要用于实现提高系统的响应速度.对于图片比较多的网页,如果一次性加载出所有的图片,会导致系统的加 ...
- JS结合PHP瀑布流,JavaScript_原生JS实现响应式瀑布流布局，原生JS实现的瀑布流布局，代 - phpStudy...
原生JS实现响应式瀑布流布局 原生JS实现的瀑布流布局,代码及demo代码地址:https://github.com/leozdgao/responsive_waterfall Demo:http:/ ...
- 瀑布流布局(原生js,jQuery实现)
项目地址: 瀑布流布局实战 阅读人群: 懂html,css,js,jquery的coder 阅读时间: 60minutes 1. 瀑布流式布局简介 什么是瀑布流布局 一种网站页面布局,视觉表现为参差不 ...
- JS实现瀑布流布局（动态新增数据）
本文旨在用JS写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,在页面滚动到底部后模拟ajax数据加载新图片功能. 实现思路: 1.首先对第一行图片进行布局,提取出高度最小一列的高度. 2.第二行开 ...
- JavaScript——基本的瀑布流布局及ajax动态新增数据
本文用纯js代码手写一个瀑布流网页效果,初步实现一个基本的瀑布流布局,以及滚动到底部后模拟ajax数据加载新图片功能. 缺点: 1. 程序不是响应式,不能实时调整页面宽度: 2. 程序中当新增ajax ...
- jquery瀑布流布局和鼠标滚动加载
jquery部分: //引入JQ库(版本不同会有差别) <script src="https://cdn.bootcss.com.jquery/2.1.1/jquery.min.js& ...
- html瀑布流布局是什么,瀑布流布局图片与css多种实现思路剖析
一.什么是瀑布流布局 瀑布流布局在当下前端网页设计中越来越流行,主要表现形式为上下高度参差不齐的多行布局,往往图片各异大小不等却能够自动适应排成一排按行进行展示,滚动条下拉还不会不断地自动适应加载数据 ...
- 3种方式实现瀑布流布局
JS 实现瀑布流布局 前言 一.JS 实现瀑布流 二.column 多行布局实现瀑布流 三.flex 弹性布局实现瀑布流 四.3种方式对比 前言 今天逛闲鱼的时候观察到每一行的高度不是相同的,经了解才 ...
最新文章
- unilever workspace creating space
- Delphi中PCAHR的妙用
- 朴素贝叶斯原理及实现
- 有关编译嵌入式android的swap空间不够导致的编译错误和解决办法
- [转]6个开源数据科学项目
- 蓝桥杯2019年第十届C/C++省赛B组第九题-后缀表达式
- PyCharm 2020.2.3复制粘贴及删除键修正
- 关系型数据库管理系统（RDBMS）与非关系型数据库（NoSQL）之间的区别
- LeetCode——remove-duplicates-from-sorted-list
- 【C++】算法集锦（11）：敏感词过滤算法（DFA）
- red5流媒体服务器系统,red5 流媒体服务器配置
- html视频怎么转换成图片,视频怎么转成gif格式 录制视频转gif图片用什么软件|gif动画录制工具...
- 用cheatengine实现街头霸王的无限生命
- 机器学习基础-统计学习-SLT
- 解决外网与内网或内网之间的通信，NAT穿透
- 静听网+python爬虫+多线程+多进程+构建IP代理池
- 适合化工厂人员定位技术浅析,化工厂人员室内定位--新导智能
- php各种编码集详解和以及在什么情况下进行使用
- ECL模型计量与应用
- 类加载及执行子系统的案例分析