用JS简单实现图片瀑布流 + 无限瀑布流效果

最新推荐文章于 2024-05-06 16:51:36 发布
最新推荐文章于 2024-05-06 16:51:36 发布
阅读量533 收藏 1
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_26705343/article/details/113887092
版权 
<!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>
</head>
<style>
  * {
    
    position: relative;
    /* margin:0px;
        padding: 0px; */
  }

  img {
    
    display: block;
    width: 220px;
  }

  #box {
    
    margin: 0px auto;
  }

  .item {
    
    box-shadow: 2px 2px 2px #999999;
    /*设置为绝对定位,js通过top,left固定每个图片的位置*/
    position: absolute;
  }
</style>

<body>
  <div id="box">
    <img class="item" src="./images/3
最低0.47元/天 解锁文章
艾敲代码的MT
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Css3实现百度图片的横向瀑布流布局——内含解决object-fit兼容性问题
SHiny_Jun的博客
11-08 1万+
最近公司在做项目的时候需要用到横向瀑布流布局，在实现的过程中还遇到了object-fit兼容性问题，这里记录一下整个过程，想直接复制代码可以直接滚到底部。 在此先上个效果图： （希望不要吐槽里面的小哥哥）下面正题： 用的框架是vue，v-for一下： &lt;section&gt; // v-for就是根据imagesList数组去循环下面这个div部分。 &lt;div c...
【sgWaterfall】自定义组件：Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现，支持不同浏览器尺寸宽度下自适应显示列数，文本内容高度自适应。
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-13 1492
Vue实现图文瀑布流布局模式，图片预加载显示占位区域阴影，加载完成后向上浮动动画出现。
uni-app、H5实现瀑布流效果封装，列可以自定义
smileKH的博客
08-04 1722
最近做项目需要实现uni-app、H5实现瀑布流效果封装，网上搜索有很多的例子，但是代码都是不够完整的，下面来封装一个uni-app、H5都能用的代码。在小程序中，一个个item渲染可能出现问题，也通过加锁来解决问题。这就是uni-app、H5实现瀑布流效果封装，希望能帮助到你，有什么问题可以私信给我。
2024年前端最全vue 移动端无限瀑布流 插件使用，面试字节跳动的前端工程师该怎么准备
最新发布
2301_82243839的博客
05-06 622
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】},var calss1_start2 = Math.round(new Date(new Date(new Date().getTime()).setHours(8,45,0,0))/1000) //获取当天8点 开始时间var calss1_end = Math.round(new Date(new Date(new Date().getTime()).setHours(9,0,0,0))/1000) //下课时间。
手摸手，带你实现移动端H5瀑布流布局
嗜雨的博客
05-07 4147
移动端瀑布流布局是一种比较流行的网页布局方式，视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的，而是有的长有的短，呈现出一种不规则的形状。但是它们的宽度通常都是相同的 因为移动端瀑布流布局主要为竖向瀑布流，因此本文所探讨的是竖向瀑布流 特点 竖向瀑布流布局主要有下面几种特点： 一般出现在移动端 H5 页面底部 主要以图片或视频为主 降低页面复杂度，节省空间，可以容纳更多内容 不规则展示，不会那么枯燥，用户体验好 难以或者说不能滚动到页面最底部 不同于传统的分页，瀑布流因为以.
纯css和javascript、vue实现瀑布流布局的几种方式
总结归纳
04-13 2713
因为专题制作需要用到瀑布流，所以这阵子总结了几种实现瀑布流的方式。 纯css实现瀑布流主要有3种方式： 1. 多列布局multi-columns 2.Flexbox布局 3. grid布局 multi-columns 这是columns的语法：http://www.webhek.com/post/css3-multi-columns.html html代码 ...
js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
09-01
js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
09-01
原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
CSS3实现瀑布流布局与无限加载图片相册的实例代码
09-24
本文将详细介绍如何使用CSS3来创建瀑布流布局，并实现无限加载图片相册。 首先，我们来看一下`pic1.html`页面的代码。在这个例子中，HTML结构主要是包含多个`.item`类的`<p>`元素，每个`<p>`元素内部包含一个`<img>...
JavaScript实现瀑布流以及加载效果
10-20
【JavaScript实现瀑布流及其加载效果】瀑布流布局是一种常见的网页设计模式，最早由Pinterest引入，其特点是内容以不规则的多列形式呈现，随着页面滚动不断加载新的内容。这种布局方式在图片展示类网站中尤为常见，...
jquery代码实现简单的随机图片瀑布流效果
12-12
jquery随机图片瀑布流无限加载</title> <style type="text/css"> *{margin:0;padding:0;list-style-type:none;} a,img{border:0;} body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} /* ...
瀑布流布局Demo.html
09-10
一个基于vue的瀑布流布局小demo，思路是通过js给容器内的每一个内容块定位，从而实现优先补短的瀑布流布局。
HTML5+CSS3实现瀑布流布局
weixin_59685936的博客
02-21 402
HTML5+CSS3实现瀑布流布局
vue中实现瀑布流布局
SongZhengxing_的博客
09-13 412
【代码】vue中实现瀑布流布局。
CSS 实现横向滚动 h5
阿杰的博客
03-12 775
复制代码查看效果 建议使用手机模型预览 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
vue 实现的瀑布流 -- 基于flex
一个学vue用vue的前端大白,休闲听音乐，https://unpkg.com/v3demo/index.html
09-05 1202
支持动态列数变化哦！兼容度高
js实现瀑布流布局--无限加载
qq_38980678的博客
03-12 830
1.实现瀑布流布局思路 准备好数据之后 . 绑定滚动事件 . 判断页面是否到底（滚动的距离+可是区域的高度 == 最后一个元素的top） . 加载新数据，渲染新页面 .重新执行瀑布流效果 2.代码（更换图片路径之后可直接运行） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style>
写一个h5 瀑布流商品列表网页代码
weixin_35750953的博客
02-18 322
我们可以使用 HTML、CSS 和 JavaScript 来创建 h5 瀑布流商品列表网页。首先，我们需要创建一个网页文件，其中包含一个头文件，一个主要的 HTML 部分和一个脚本部分。然后，在 HTML 部分中，我们需要添加一个 div 元素，用来放置商品列表的数据。接下来，我们需要在 JavaScript 部分中写一些代码，用来从服务器获取商品列表的数据，并将其渲染到 div 中，以创建瀑布流...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
05-14
Vue是一个流行的JavaScript框架之一，它可以用于轻松实现网络图片瀑布流、下拉刷新和上拉加载更多。以下是一些步骤来实现这些功能。 1. 导入所需模块：Vue-CLI提供了一个便捷的方式来安装和使用需要的组件和库。在这种情况下，你需要安装Vue和vue-infinite-scroll并在代码中导入它们。 ``` import Vue from 'vue' import InfiniteScroll from 'vue-infinite-scroll' Vue.use(InfiniteScroll) ``` 2. 在HTML中创建一个包含瀑布流的容器：使用Vue实现瀑布流，可以使用Masonry.js，可以在CSS Grid/Flexbox布局中实现也可以使用其他可用的库。在这里，Masonry.js被用来构建瀑布流。 ``` <div class="grid" ref="grid"> <div class="grid-item" v-for="(image, i) in images" :key="i"> <img :src="image.url" alt=""> </div> </div> ``` 3. 监听滚动事件并加载更多：将vue-infinite-scroll绑定到容器上，通过监听当前可见区域的滚动位置，以决定何时需要加载更多数据。 ``` <infinite-scroll ref="infiniteScroll" @infinite="loadMore" :distance="100"> </infinite-scroll> ``` 4. 绑定数据源并请求初始数据：使用Vue在代码中设置一个名为“ images”的数据源数组，并在初始加载时通过API请求数据，并在加载完成后更新此数据源。 ``` data () { return { images: [], lastPage: 0, isLoadMore: true, api: 'https://api.flickr.com/services/rest/', apiKey: '<your-api-key>', userId: '<your-user-id>', method: 'flickr.people.getPublicPhotos', perPage: 20, page: 1, format: 'json', nojsoncallback: 1 } }, mounted () { this.loadMore() }, methods: { loadMore () { if (!this.isLoadMore) return this.isLoadMore = false axios.get(this.api, { params: { api_key: this.apiKey, user_id: this.userId, method: this.method, per_page: this.perPage, page: this.page, format: this.format, nojsoncallback: this.nojsoncallback } }).then(response => { this.images = this.images.concat(response.data.photos.photo) this.lastPage = response.data.photos.pages this.page++ this.isLoadMore = true }) } } ``` 总之，使用Vue实现网络图片瀑布流、下拉刷新和上拉加载更多可以使你的Web站点更具吸引力，并增加用户体验。以上是一个简单的示例，如果想要实现此功能，你可以按照需要引入适当的库和框架，并根据你的需求自己定制代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值