瀑布流效果实现

最新推荐文章于 2024-08-11 03:57:01 发布
最新推荐文章于 2024-08-11 03:57:01 发布
阅读量241 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_41747081/article/details/104055553
版权 
<!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/3.4.1/jquery.min.js"></script>
    <style>
       #box {
        margin: 0;
        padding: 0;
        position: relative;
    }
    
    .item div {
        width: 220px;
        display: block;
    }
    
    .item {
        box-shadow: 2px 2px 2px #999;
        position: absolute;
    }
    </style>
</head>
<body>
    <div id="box">
        <div class="item">
            <div class="itemContent" style="background-color: blue;height: 150px">1</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: rosybrown;height: 100px">2</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 80px">3</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: #456;height: 100px">4</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 200px">5</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: blue;height: 150px">6</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 80px">7</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: green;height: 180px">8</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: #ccc;height: 80px">9</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 280px">27</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: orange;height: 380px">10</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: blue;height: 150px">11</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: rosybrown;height: 100px">12</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 80px">13</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: #456;height: 100px">14</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 200px">15</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: blue;height: 150px">16</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 80px">17</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: green;height: 180px">18</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: #ccc;height: 80px">19</div>
        </div>
        <div class="item">
            <div class="itemContent" style="background-color: red;height: 280px">20</div>
        </div>
    </div>
    <script>
        let box = document.getElementById('box');
        let items = box.children;
        // 定义每一列之间的间隙 为10像素
        let gap = 20;
        // 封装成一个函数
        const waterFall = () => {
            // 1- 确定列数  = 页面的宽度 / 图片的宽度
            let pageWidth = getClient().width;
            pageWidth = 800;
            let itemWidth = items[0].offsetWidth;
            itemWidth = 280;
            let columns = parseInt(pageWidth / (itemWidth + gap));
            // columns = 2;
            let arr = [];
            Array.from(items).forEach((item, index) => {
            if (index < columns) {
                // 确定第一行
                item.style.top = 0;
                item.style.left
                = (itemWidth + gap) * index + 'px';
                arr.push(item.offsetHeight);
    
            } else {
                // 找到数组中最小高度和它的索引
                let minHeight = arr[0];
                let index = 0;
                arr.forEach((tripleItems, tripleIndex) => {
                    if (minHeight > tripleItems) {
                        minHeight = tripleItems;
                        index = tripleIndex;
                    }
                });
                // top值就是最小列的高度 + gap
                item.style.top = arr[index] + gap + 'px';
                // left值就是最小列距离左边的距离
                item.style.left = items[index].offsetLeft + 'px';
                // 最小列的高度 = 当前自己的高度 + 拼接过来的高度 + 间隙的高度
                arr[index] = arr[index] + item.offsetHeight + gap;
            }
        });
        };

        // clientWidth 处理兼容性
        const getClient = () => {
            return {
                width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
            };
        };
        window.onload = function() {
            // 一进来就调用一次
            waterFall();
        };
    </script>
</body>
</html>

效果为：
在这里插入图片描述

zhener09
关注
瀑布流效果实现vue3
Sink
04-11 2429
瀑布流效果实现vue3
瀑布流实现
11-07
网上找的瀑布流安卓实现源码demo，希望这个可以对你有用
实现瀑布流效果
HeyinB的博客
09-12 799
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局，最早采用此布局的是网站是 Pinterest，后逐渐在国内流行。 瀑布流效果 瀑布流效果就是每个盒子等宽不等高，按照一定方式排列在一起的效果 下面来说说实现的原理 1.首先，我们有很多的盒子，这些盒子宽度都是相等的，但高度都是不等（这些盒子都是脱离文档流的position）。 2.算出你第一排要...
Android 特殊样式的瀑布流
最新发布
weixin_40425933的博客
08-11 31
Android 特殊样式的瀑布流实现 在 Android 开发中，瀑布流是一种非常流行的布局方式，常用于展示图片或商品列表等。为了实现一个特殊样式的瀑布流，我们可以结合 RecyclerView 和 GridLayoutManager 来达到预期效果。本文将通过代码示例，带你一起实现这个功能。 瀑布流的基本概念 瀑布流布局...
详解瀑布流实现
曹定栓的博客
08-10 4174
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式，视觉表现为参差不齐的多栏布局。最早采用此布局的是网站是 Pinterest，后逐渐在国内流行，比如花瓣，蘑菇街等。
瀑布流的实现
mingxiangzhimin的博客
11-22 177
适配器 九宫格 package com.qh.xuezhimin.week03okmvp.adapter; import android.content.Context; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.wid...
安卓 RecyclerView瀑布流效果实现
12-15
总的来说，Android中的RecyclerView瀑布流效果实现需要理解布局管理器的工作原理，熟练掌握适配器机制，并能灵活处理高度动态变化的item。通过实践和调试，你将能够创建出流畅且美观的瀑布流界面。
JS原生瀑布流效果实现
10-17
主要介绍了JS原生瀑布流效果实现 ，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Android 瀑布流 效果实现
03-29
在本项目中，我们将探讨如何在Android中实现瀑布流效果，并支持上拉加载和下拉刷新功能。 首先，瀑布流的核心在于对视图的自适应布局管理。在Android中，我们可以使用第三方库如`StaggeredGridLayoutManager`来轻松...
使用JS实现图片展示瀑布流效果(简单实例)
10-21
本文提供了使用JS来实现图片展示的瀑布流效果的简单实例。 在这个实例中，使用了HTML和CSS来构建基本的网页结构和样式。在HTML中，创建了一个容器（box）和多个子元素（ul），用来承载图片。图片以列表项（li）的...
瀑布流的简单实现
04-19
NULL 博文链接：https://snandy.iteye.com/blog/1879161
瀑布流原理以及实现
weixin_34129145的博客
07-31 265
瀑布流在多个网站都可以看到，例如百度图片，pinterest，看起来很好看，实现起来也很简单。在先前我其实想用插件的，但是插件一时爽，全家火葬场。需要依赖的东西太多了，网上有waterfall，masonry这些插件，看了waterfall的源码，需要依赖handlebars，还有jQuery。在公司项目中移动端使用的是zepto，那又需要引用jquery，handlebars感觉就特别蠢，所以干...
js实现瀑布流效果
Think More 的博客
06-03 386
瀑布流布局
瀑布流的3种实现方式
dai_yanxia的博客
09-27 2878
瀑布流的3实现方式 1:js 两列布局实现，思路：左右分为两个容器，根据容器的高度（相对低的那一个）决定下一个元素应该放在哪个容器内，这样视觉就实现了瀑布流的效果，代码如下： 瀑布流容器 <!--瀑布流容器--> <div id="box"></div> js代码 //接口获取数据，循环展示 function forList(list){ var HTML = ""; for(var i=0;i<list.leng
实现瀑布流的几种方式（效果图）
yunduan666542的博客
07-10 716
代码直接复制即可使用，简单易理解
简单瀑布流实现
小马哥好棒哦
07-04 541
实现效果 这里实现了一个较为复杂的瀑布流效果，在基本的高度不一的瀑布流上，增加了占据两列宽度大小的cell，效果如图： fall.gif 具体实现 1，技术基础 这里使用了UICollectionView来展示瀑布流，通过自定义UICollectionView对象的collectionViewLayout，来实现对UICollectionView中ce
原生js实现瀑布流效果
weixin_34015336的博客
12-28 134
前言 最近在整理js基础知识，接触到了几个常用的页面特效，其中觉得用原生js实现瀑布流的案例十分有趣，于是与大家分享一下。 瀑布流 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。 1、首先瀑布流所有的图片应该保持宽度一致，高度是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值