用原生JS写出瀑布流（等高等宽）及无限追加div

最新推荐文章于 2024-03-23 13:43:38 发布
最新推荐文章于 2024-03-23 13:43:38 发布
阅读量393 收藏
点赞数 1
分类专栏： js 前端 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ychy1/article/details/128006831
版权

   首先简单的介绍一下，瀑布流布局 （等高等宽）

       是一种比较流行的网站页面布局方式，视觉表现为参差不起的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加在当前底部，其实瀑布流的特点就是参差不齐的排列方式，以及流式布局的扩展性，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动。

    瀑布流的使用场景   

        这种布局方式常见于一些照片为主的网站，就比如一些常见的往回走那：百度图片，移动端的淘宝官网等等。

比如这个网站的页面布局：https://huaban.com/discovery

      那么我们需要了解这个布局的实现原理

     我们先计算一行能够容纳几列元素

     然后通过计算比较找出这一列元素种高度之和的最小一列

    然后将下一行的第一个元素添加至高度之和最小的这一列下面

    然后继续计算所有列中高度之和最小的那一列，然后继续将新元素添加至高度之和最小的那一列后面直到所有元素添加完毕。

 

下面直接上代码：

<
最低0.47元/天 解锁文章
Joker.,
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flex布局实现等高图片瀑布流效果
m0_46219714的博客
09-22 1024
图片瀑布流效果
前端学习（231）:box-reflect倒影
歌谣的博客
12-27 267
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
实现瀑布流布局的四种方法
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
原生js中的对元素的添加,删除,复制,创建等操作.
xhdjdje的博客
02-19 3542
使用原生js来对元素进行创建,删除,复制,添加等操作
JavaScript原生中多个类的添加和删除
最新发布
weixin_44837194的博客
03-23 347
1.给已有的类中增加一个类 classList.add('类名')2.删除指定的类 classList.remove('类名'）
前端div块的瀑布流布局
qq_39352780的博客
06-23 1421
前言 如图，每个新闻类别是一个块。新闻类别个数是动态的，每个类别的新闻条数是动态的，产品经理要求做成图中这样的瀑布流布局。借鉴别人图片的瀑布流布局，来实现这个新闻块的瀑布流布局。 开始 对于图片的瀑布流布局来说，有定宽或者定高。我选择定宽的方法。但是在实际情况中，浏览器有多种屏幕宽度，既要给每个div块定宽，又要做到自适应。 所以在这里， 1、我用css计算并设置不同屏幕下div块的宽度：如在>1500宽度下，可以放置5列，除去中间的间距，每列宽度为width:calc(100% - 30px*4)
原生JS瀑布流布局，无限加载
09-01
总结，原生JS实现的瀑布流布局和无限加载结合了DOM操作、事件监听、布局计算等多个技术点。通过合理的优化策略，可以实现高效且用户体验良好的页面布局效果。在实际开发中，可以根据项目需求进行调整和定制，以满足...
纯原生js无限瀑布流
09-01
纯原生JavaScript实现无限瀑布流是一个涉及到前端布局、事件处理、数据获取和性能优化等多个方面的问题。通过理解以上知识点并结合实际项目需求，我们可以构建出一个高效、流畅的瀑布流页面。在实践中，可以参考现有...
原生JS实现瀑布流插件
10-18
本篇文章给大家详细分析了一个原生JS实现瀑布流插件以及代码相关讲解，对此有兴趣的读者们参考学习下吧。
原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
09-01
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的瀑布流布局，同时结合无限加载功能和鼠标悬停时的图片遮罩效果。瀑布流布局是一种流行的设计模式，常用于展示图片或内容，使得页面看起来既美观又有序...
ios-实用不等高瀑布流.zip
07-11
ios-实用不等高瀑布流.zip
原生JavaScript实现瀑布流布局
10-23
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
原生js添加css标签,通过原生js添加div和css
weixin_32571761的博客
08-04 2992
function createStyle(){return"*{padding:0;margin:0;border:0}.loading{width:640px;height:1024px;margin:0 auto}.loadImg{width:640px;height:1024px;animation:fadeInOut 3s linear;-webkit-animation:fadeInOu...
瀑布流，并且解决定位和容器高度自适应问题，随意放哪都可以用。
yanlintao1的专栏
08-11 3248
瀑布流，并且解决定位和容器高度自适应问题，随意放哪都可以用。
在地图组件中使用原生js添加dom结构时 样式 伪类不生效
qq_54580397的博客
08-03 375
手动创建的div dom class样式不生效 删除dom
原生js中如何添加dom元素
热门推荐
zl13015214442的博客
05-22 3万+
1. appendChild() 概念：把要添加的节点添加到指定父级里面的最后面，所以也叫追加。 使用方式：fatherdom.appendChild( insertdom )。 兼容性：所有浏览器都支持此方法。 2. insertBefore() 概念：把要插入的节点添加到指定父级里面的指定节点之前。 使用方式：fatherdom.insertBefore( insertdom，chose...
原生JS中动态添加元素
ljh243581579的博客
12-04 3225
效果如图，在点击事件中添加了支付窗口 对接渠道时，遇到一个需要在JS中添加iframe的需求 代码如下： //添加一个div，div中包含一个iframe window.onload = function () { var div = document.createElement('div'); div.id = &quot;zhifu_box&quot;; div.className =...
原生js添加节点appendChild、insertBefore
LLL_liuhui的博客
04-12 2万+
1、createElement() 创建元素节点 var element=document.createElement(‘元素名’);2、crateTextNode() 创建文本节点 var txt=document.crateTextNode(‘文本内容’);3、createAttribute() 创建属性节点 var attr=document.createAttribute(‘属性名’)
用原生JavaScript写一个适配任何浏览器的瀑布流插件，支持滚动加载
06-14
好的，我可以为您介绍一个基于原生 JavaScript 的瀑布流插件 Masonry，并且可以实现滚动加载。 首先，您需要在 HTML 中引入 Masonry 的 JavaScript 文件： ```html <script src="path/to/masonry.pkgd.min.js"></script> ``` 然后，您需要准备一个容器元素，例如： ```html <div id="masonry-container"></div> ``` 接下来，您可以在 JavaScript 中初始化 Masonry： ```javascript var container = document.getElementById('masonry-container'); var masonry = new Masonry(container, { // 在这里设置 Masonry 的选项 itemSelector: '.masonry-item', columnWidth: 200, gutter: 10 }); ``` 在上面的代码中，`itemSelector` 表示您要使用 Masonry 布局的每个子元素的选择器，`columnWidth` 表示每列的宽度，`gutter` 表示列之间的间距。 现在，您可以将一些子元素添加到容器中，并在添加后调用 `masonry.layout()` 方法来触发布局： ```javascript var item1 = document.createElement('div'); item1.classList.add('masonry-item'); item1.style.height = '100px'; container.appendChild(item1); var item2 = document.createElement('div'); item2.classList.add('masonry-item'); item2.style.height = '150px'; container.appendChild(item2); // 触发布局 masonry.layout(); ``` 最后，如果您想要实现滚动加载，您可以使用 JavaScript 监听 `window` 对象的 `scroll` 事件，并在滚动到底部时加载更多子元素： ```javascript window.addEventListener('scroll', function() { var containerRect = container.getBoundingClientRect(); if (containerRect.bottom <= window.innerHeight) { // 加载更多子元素到容器中 // ... // 触发布局 masonry.layout(); } }); ``` 在上面的代码中，`container.getBoundingClientRect().bottom` 表示容器元素底部相对于视口的位置，`window.innerHeight` 表示视口高度。如果容器底部在视口内，那么就加载更多子元素并触发布局。 以上就是一个简单的、适配任何浏览器的瀑布流插件的实现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值