瀑布流效果

于 2025-04-30 12:31:35 发布
阅读量222 收藏
点赞数 7
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SY_mo/article/details/147621820
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0%;
            padding: 0%;
            box-sizing: border-box;
        }
        .container{
                   width: 98%;
                   margin: 0 auto; 
                   position: relative;
        }
        .outer{
            position: absolute;
           width: 210px;
           height: auto;
           padding: 5px;
        }
        .inner{
            border: solid 1px #333;
            border-radius: 8px;
            padding: 5px;
        }
        img{
            width: 188px;
            height: auto;
            border-radius: 5px;
            vertical-align: bottom;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="outer">
            <div class="inner"><img src="./images/img (1).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (2).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (3).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (4).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (5).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (6).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (7).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (8).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (9).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (10).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (11).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (12).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (13).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (14).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (15).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (16).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (17).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (18).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (19).jpg" alt=""></div>
        </div>
        <div class="outer">
            <div class="inner"><img src="./images/img (20).jpg" alt=""></div>
        </div>
    </div>
    <script>
        window.onload=function(){
         let container=document.querySelector('.container');
        let c_width=container.offsetWidth;

        let cols=Math.floor(c_width/210);
        let imgs=document.querySelectorAll('.outer');
        let arr=[];
        for(let i=0;i<imgs.length;i++){
           if(i<cols){
                  imgs[i].style.top=0;
                  imgs[i].style.left=i*210+'px'; 
                  arr.push(imgs[i].offsetHeight);
            
           }
           else{
            let minHeight=Math.min(...arr);
             let minindex=arr.indexOf(minHeight);
            imgs[i].style.top=minHeight+'px';
             imgs[i].style.left=minindex*210+'px';
            arr[minindex]=imgs[i].offsetHeight+minHeight;
               
           }
        }
    }
      
    </script>
    
</body>
</html>

SY_mo
关注
Flutter 瀑布流效果
xq610928的博客
06-26 3888
前言 : 各位同学大家好, 瀑布流列表显示效果相信在坐的同学中做过原生安卓 和iOS的同学都有实现过吧。 原生的实现方式网上都很多开源例子甚至是开源库 ,我就不展开讲了。今天我主要给大家介绍下flutter中瀑布流如何实现的 ，废话不多说我们正式开始 。 效果如图： 准备工作 : 安装flutter环境 如果只是跑安卓设备， win系统就行了。要是同时运行安卓和iOS 就需要mac电脑了 配置环境变量这边就不展开讲了,大家可以看我之前的文章。 需要用到的三方库： flutter_staggered_gri
Js实现瀑布流效果
weixin_55983004的博客
05-26 4834
Js实现瀑布流效果 通过JavaScript实现瀑布流效果，实现不同大小的图片有序展示 效果图： 核心： 1.将图片宽度固定，用浏览器窗口大小除以每个图片的宽度，求出要分成的列数 2.将每个图片定位 3.每次找到最小高度的列，将图片加到该列后 HTML部分以及CSS样式 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> &lt
实现瀑布流效果
A88552211的博客
07-27 245
代码】实现瀑布流效果。
JS实现瀑布流效果
qq_35146837的博客
05-25 1131
1、页面布局情况 准备好11张宽度值相同高度不同的图片来实现瀑布流效果。 *{padding:0;margin:0;} .main .box{float:left;} .main .box .pic{border:1px solid #000;padding:15px;box-shadow:0px 2px 0px 2px #ccc;border-radius:5%;} .main .box .pic img{width:200px;} 2、页面内容情况 <div class="main">
Kotlin之瀑布流效果
juer2017的博客
06-16 682
截图
JS实现页面瀑布流效果
gsy445566778899的博客
05-26 2137
瀑布流，是比较流行的一种网站页面，视觉表现为参差不齐的多栏布局，随着窗口的缩放会自动计算并重新排序；
给wordpress网站添加瀑布流效果
xiaoyuya
06-17 839
一个常用的组件是Masonry.js，它可以实现这种不规则的网格布局，并且支持元素的顶部对齐。可以使用ImagesLoaded.js插件来确保所有图片都加载完成后再初始化Masonry布局，这样可以避免布局在图片加载过程中的跳变。最后，记得在实际开发中测试你的布局在各种环境下的表现，确保它在不同的屏幕尺寸和浏览器环境下都能正常显示。由于Bootstrap是一个响应式框架，确保你的瀑布流布局也能在不同的屏幕尺寸下良好地工作。请注意，上述代码是一个基本的示例，你可能需要根据你的具体需求和项目结构进行调整。
原生js实现瀑布流效果
weixin_38984030的博客
07-16 425
前言 最近在整理js基础知识，接触到了几个常用的页面特效，其中觉得用原生js实现瀑布流的案例十分有趣，于是与大家分享一下。 瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 1、首先瀑布流所有的图片应该保持宽度一致，高度是由内容决定。 左浮动的话，我们可以看到第6个盒...
vue实现瀑布流效果
HJay_Chou的博客
09-03 3123
vue实现瀑布流效果一、介绍二、布局原理三、具体实现四、实现效果 一、介绍 瀑布流，又称为瀑布流布局。是比较流行的一种网页展示形式，在视觉上表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 二、布局原理 等宽不等高的图片排列，从第二行开始，图片插入的位置根据上一行插入图片得最低处依次插入，最终形成参差不齐的布局效果。 三、具体实现 这里是
使用JS实现图片展示瀑布流效果(简单实例)
10-21
本文提供了使用JS来实现图片展示的瀑布流效果的简单实例。 在这个实例中，使用了HTML和CSS来构建基本的网页结构和样式。在HTML中，创建了一个容器（box）和多个子元素（ul），用来承载图片。图片以列表项（li）的...
vue.js组件vue-waterfall-easy实现瀑布流效果
12-12
在 Vue.js 中实现瀑布流效果，通常需要处理元素的排列和动态加载问题。Vue-waterfall-easy 提供了一种简洁的方式，允许开发者轻松地将瀑布流集成到他们的应用中。在介绍如何使用这个组件之前，我们先了解一下瀑布流...
基于JavaScript实现瀑布流效果
11-29
在JavaScript中实现瀑布流效果，主要涉及到以下几个关键点： 1. **HTML结构**：首先，需要创建一个容器 `.container` 用来放置所有的元素，这里使用了四个 `.item` div 作为基础单元，每个 `.item` 用于显示一张...
css和js实现瀑布流效果示例
12-13
为了实现瀑布流效果，JavaScript（这里可能使用了jQuery库）用于计算每个列的高度并动态调整元素的位置。插件代码中的`$.fn.waterfal`是一个自定义的jQuery方法，接受一个选项对象`opt`，其中`wflist`是选择器，表示...
Vue2、Vue3区别之响应式原理
2203_75479159的博客
04-27 1249
工作原理：通过遍历数据对象的每个属性，使用Object.defineProperty来定义getter和setter。当数据被访问时，收集依赖；当数据变化时，触发更新。但这种方法有一些限制，比如无法检测到对象属性的添加或删除，需要借助Vue.set或Vue.delete方法。对于数组，Vue 2需要重写数组的方法（如push、pop等）来触发更新，而不能直接通过索引设置元素或修改长度。实现步骤：Object.defineProperty()语法 代码示例： 2. 局限性 无法检测动态属性： 解
使用css修饰网页元素
2302_80250536的博客
04-26 690
设置文本元素的字体类型语法：name是字体名称，字体名称按优先顺序排列，以逗号隔开，如果字体名称包含空格，则要用引号括起。
Rollup、Webpack、Esbuild 和 Vite 前端打包工具
weixin_42283818的博客
04-27 1039
Rollup、Webpack、Esbuild 和 Vite 都是前端开发中常用的打包工具，它们各有特点，以下是对它们的详细对比：
WebXR教学 06 项目4 跳跃小游戏
最新发布
teacherchen90的博客
04-28 370
【代码】WebXR教学 06 项目4 跳跃小游戏。
Android瀑布流效果实现与应用
Android 平台上实现瀑布流效果需要考虑其特有的系统属性和编程接口。 #### 1. 瀑布流效果原理 瀑布流是一种类似于水瀑布的自然下落的布局，它没有固定高度，而是由不同高度的单元格组成，这些单元格可以是图片、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值