JS瀑布流

最新推荐文章于 2024-11-14 17:44:13 发布
最新推荐文章于 2024-11-14 17:44:13 发布
阅读量248 收藏
点赞数 1
文章标签： javascript es6 html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46005715/article/details/115798741
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>瀑布流</title>
    <link rel="stylesheet" href="../css/reset.css" />

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .bigbox {
        width: 900px;
        margin: 0 auto;
        background: #3d4a65;
        min-height: 200px;
        position: relative;
      }
      .picbox {
        /*图片盒子*/
        /*边框2px*/
        padding: 2px;
        float: left;
        overflow: hidden;
        /*position:absolute;*/
      }
      img {
        /*图片自动大小缩放*/
        width: 200px;

      }
    </style>
  </head>
  <body>
    <script>
      //要全部加载完后再计算 并获取容器的宽度

      //要点：1、第一行的元素加浮动 其余行的元素加绝对定位
      //2、空数组记录第一行元素的高度 并将接下来的元素接到数组中最小的下标部分 定位
      // 3、更新数组高度：preHeight+elementHeight=newHeight;

      window.onload = function () {
        let bigBox = document.querySelector(".bigbox"); //大盒子
        let picbox = document.querySelectorAll(".picbox"); //存放图片的盒子

        let bigBoxWidth = bigBox.clientWidth; //大框内容区宽度
        let picWidth = picbox[0].offsetWidth; //图片容器的内容宽度+padding+border的宽度

        // 计算每行能放下的列数
        let colNum = Math.floor(bigBoxWidth / picWidth); //向下取整

        //每colNum张图片放在一行
        let colHightArr = []; //定义一个存行高的数组
        picbox.forEach((pic, index) => {
          if (index >= colNum) {
            //加绝对定位 使其放在每行最短的部分
            for (let i = index; i < picbox.length; i++) {
              // 第一行以后的元素全部加绝对定位
              picbox[i].style.position = "absolute";
            }
          } else {
            //第一行的时候 将每张图片的高度都存入数组
            colHightArr.push(picbox[index].offsetHeight);
          }
        });
        let short = findmin(colHightArr); //找到最短下标
        position(); //图片设置定位
        setHeight(); //定位完毕后给父元素（最外层包裹的大盒子）加高度
        function position() {
          // 定位函数
          for (let i = colNum; i < picbox.length; i++) {
            //循环除了第一行的所有图片\
            //找到最短的地方定位
            picbox[i].style.left = picWidth * short + "px";
            picbox[i].style.top = colHightArr[short] + "px";
            let addPicHeight = picbox[i].offsetHeight; //新加入图片的高度
            let newHeight = addPicHeight + colHightArr[short];
            colHightArr.splice(short, 1, newHeight); //替换元素
            short = findmin(colHightArr); //再次找到最短的下标 进入下一次循环
          }
        }
        function findmin(arr) {
          //找到最短下标函数
          let short = arr.indexOf(Math.min(...arr)); //寻找最短高度的下标索引值
          return short; //返回最短的下标
        }

        function setHeight() {
          //解决父元素会高度塌陷的问题
          let long = Math.max(...colHightArr); //找到最长的元素
          bigBox.style.height = long + "px";
        }
      };
    </script>
    <div class="bigbox clean">
      <!--    外边框-->
      <div class="picbox">
        <img src="../img/1.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/2.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/3.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/4.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/5.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/6.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/7.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/8.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/9.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/10.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/11.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/12.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/13.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/14.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/15.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/16.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/17.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/18.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/19.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/20.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/21.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/22.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/23.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/24.jpg" alt="" />
      </div>
      <div class="picbox">
        <img src="../img/25.jpg" alt="" />
      </div>
    </div>
  </body>
</html>
西红柿炒番茄@ZXR
关注
原生JS瀑布流布局，无限加载
09-01
在原生JavaScript中实现瀑布流布局，不仅可以避免对特定库或框架的依赖，还能提高页面性能，特别是在处理大量数据和动态加载时。 一、瀑布流布局的基本原理 1. 确定列数：首先，我们需要确定页面的列数。这通常基于...
JS瀑布流效果
03-20
瀑布流布局，又称Masonry...总之，JS瀑布流效果是一种利用JavaScript动态调整元素布局的技术，通过合理地分配和排列元素，实现了视觉上引人入胜的页面展示。掌握这一技术，对于提升网页设计的用户体验有着重要的作用。
javascript瀑布流布局实现方法详解
10-22
总的来说，实现JavaScript瀑布流布局需要理解HTML结构、CSS样式以及JavaScript事件和DOM操作。通过对元素的动态布局和数据的实时加载，我们可以创建出一个既美观又响应式的瀑布流布局。这种布局方法在博客、产品展示...
JavaScript瀑布流布局实现代码
10-19
JavaScript瀑布流布局是一种常见的网页设计布局方式，常用于展示大量且尺寸不一的内容，如图片、文章摘要等。它的特点是内容元素（如图片）在页面上以多列的形式呈现，每列的高度根据其中元素的最高内容自适应，形成...
js瀑布流demo案例
11-14
JavaScript瀑布流布局是一种常见的网页设计模式，常用于展示图片、文章等信息，使得页面内容能够自适应不同屏幕尺寸，同时保持美观的排列效果。在这个"js瀑布流demo案例"中，我们将探讨JavaScript如何实现这种布局，...
跟着尚硅谷学vue2—进阶版2.0—使用 Vue 脚手架1.0
zhzijun的博客
11-13 414
分析脚手架 、ref和props、mixin混入、插件、scoped样式、总结TodoList案例、浏览器本地存储-webStorage、TodoList_本地存储
Vue中的常用指令
m0_62388400的博客
11-12 1150
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 155
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 755
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
从零开始快速构建Vue3项目
欧唯薇
11-13 861
是目前最推荐的方式来创建 Vue 3 项目，因为它速度快，配置简洁，并且是 Vue 3 的官方推荐工具。打开浏览器并访问 `http://localhost:5173`，你将看到一个基本的 Vue 3 应用程序运行。1、若需要使用不同版本node（兼容新旧项目环境），则需要使用nvm来进行node多版本管理，下载并安装。2、若出现某个依赖安装报错，可以npm install --ignore-scripts，最后再来单独安装报错的依赖。
Vue常用加密方式
m0_51431448的博客
11-13 115
消息摘要是从原始数据中通过特定算法计算出的一个固定长度的字符串，这个过程通常被称为哈希函数或散列函数。固定长度：无论输入的数据有多大，输出的消息摘要都有固定的长度。唯一性：理想情况下，不同的输入应该产生不同的消息摘要，虽然在现实中由于哈希碰撞的存在，这并不总是可能的。不可逆性：从消息摘要不能反推出原始数据。高效性：计算消息摘要的过程应该是快速且高效的。
Nuxt2和Nuxt3 对于SEO优化的区别
书山有路_邓
11-14 443
nuxt
第三十七章 Vue之编程式导航及跳转传参
Calvin的博客
11-10 1588
前面的章节我们学习了声明式导航的路由跳转，简单理解就是通过链接形式的路由跳转，本章节我们来学习下编程式导航跳转，即点击按钮来实现页面的跳转。在Vue中提供了两种实现方式。Home.vue的代码在前者基础上稍做调整即可，获取方式等代码一样。编程式导航两种跳转方式对于两种传参方式也都支持。跳转方法中通过name属性指定路由即可。2.1.1. 查询参数传参（简写）2.2. name命名路由跳转传参。1.2. name 命名路由跳转。2.1. path路径跳转传参。2.2.1. 查询参数传参。
vue3 富文本组件（MDEditor）在拖拽组件（vuedraggable）点击功能失效问题
我只是个很菜的前端
11-12 203
vue3 富文本组件（MDEditor）在拖拽组件（vuedraggable）点击功能失效问题 拖拽组件内点击事件失效问题
vue3 ts项目结合vant4 复选框+气泡弹框实现一个类似Select样式的下拉选择功能
m0_65292523的博客
11-12 647
const warnNameList = ref([modelSystem(GetPrecent(1000, 1500), '模型名称'), modelSystem(GetPrecent(1500, 2000), '模型名称')])本来想使用vant现有组件直接使用，但是只找到了下拉菜单那种的组件，不满足这个项目的需求，于是我就自己将vant 气泡弹框结合复选框，实现了一个类似element Plus里select下拉选择的组件。// 默认选中下拉列表的第一项。// 复选框 全选状态。
vite + vue3 + ts解决别名引用@/api/user报错找不到相应的模块
最新发布
qq_43206280的博客
11-14 162
这里的前提是，文件路径以及文件已存在的情况下还是报错。
vue3 中,字段必须在 onShow 前定义?
一直在路上
11-14 141
在Vue 3中，如果你在组件的 setup() 函数中使用了生命周期钩子，比如 onShow，你可能遇到了一个错误，提示你在 onShow 前定义了某个字段。这通常意味着你应该在 setup() 函数的顶部定义这些字段，并确保它们是响应式的，这样它们就可以在组件的任何生命周期钩子中被访问和更新。在这个例子中，myField 是在 setup() 函数的顶部定义的，这保证了它在 onShow 被调用前已经定义。这样，myField 就可以在 onShow 钩子中被访问了。
深入探讨JavaScript模块化导出与导入：export与import的使用指南
cooldream2009的博客
11-12 917
在现代JavaScript开发中，模块化编程的理念逐渐成为主流，帮助开发者分解代码，模块化管理功能，以便更好地组织和复用代码。模块化不仅提升了代码的可维护性和可读性，还促进了多人协作。本文将深入探讨JavaScript中的模块化导入和导出，主要聚焦于`export`与`import`的使用方法和最佳实践，并结合实际例子帮助读者更好地理解如何在项目中使用这些功能。
JavaScript 高阶总结
qq_43787947的博客
11-11 903
JavaScript 高级总结
js瀑布流
06-01
这里是一个简单的 JavaScript 瀑布流实现的代码，可以供您参考： ```html <!DOCTYPE html> 瀑布流示例 #container { width: 800px; margin: 0 auto; } .item { width: 380px; margin: 10px; padding: ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值