HTML+css+js实现瀑布流效果

最新推荐文章于 2024-08-14 20:33:16 发布
最新推荐文章于 2024-08-14 20:33:16 发布
阅读量148 收藏 1
点赞数 1
文章标签： js css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46038677/article/details/119006470
版权

结果预览,实现了图片瀑布流效果，和可以无限下滑效果

一.HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现瀑布流</title>
    <link type="text/css" rel="stylesheet" href="js实现瀑布流.css">
    <script src="js实现瀑布流.js"></script>
</head>
<body>
<div id="con">
    <div class="box">
        <div class="box_img">
            <img src="lmages4/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/5.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/1.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/9.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/2.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/4.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/6.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/7.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/8.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/3.jpg">
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <img src="lmages4/2.jpg">
        </div>
    </div>
</div>
</body>
</html>

二.CSS代码

*{
    margin: 0px;
    padding: 0px;
}
#con{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}
.box_img img{
    width: 150px;
    height: auto;
}

三.js代码

window.onload = function (){
    imgLocation("con","box");

    //模拟数据
    var imgData = {"data":[{"src":"2.jpg"},{"src":"4.jpg"},{"src":"6.jpg"}
            ,{"src":"7.jpg"},{"src":"1.jpg"},{"src":"3.jpg"},{"src":"5.jpg"},{"src":"9.jpg"},
            {"src":"8.jpg"}]}
    //监听滚动条
    window.onscroll = function (){
        // checkFlag();
        if(checkFlag()){
            console.log("wqr")
            var cparent = document.getElementById("con");
            for(var i= 0;i<imgData.data.length;i++){
                var ccontent =document.createElement("div");//创建节点
                ccontent.className="box";//class的值
                cparent.appendChild(ccontent);//添加到父节点中
                var boximg = document.createElement("div");
                boximg.className="box_img";
                ccontent.appendChild(boximg);
                var img = document.createElement("img");
                img.src = "lmages4/"+imgData.data[i].src;
                boximg.appendChild(img);
            }
            imgLocation("con","box");
        }
    }
}

function checkFlag(){
    var cparent =document.getElementById("con");
    var ccontent=getChildElement(cparent,"box");
    var lastConHeight = ccontent[ccontent.length - 1].offsetTop;
    var scrollTop =document.body.scrollTop||document.documentElement.scrollTop;//浏览器兼容问题
    //document.documentElement.scrollTop  数值为未被显示的部分，开始被显示了
    var pageHeight =document.body.clientHeight||document.documentElement.clientHeight;
    console.log(pageHeight);
    console.log(lastConHeight);
    // console.log(ccontent[ccontent.length - 1].offsetHeight);
    console.log(scrollTop);
    if(lastConHeight<scrollTop+pageHeight){
        return true;
    }

}

function imgLocation(parent,content) {
    //将parent下所有的content全部取出来
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent, content);
    // console.log(ccontent);//浏览器控制台打印
    var imgWidth = ccontent[0].offsetWidth;//随便得到一张图片的宽度
    var cols = Math.floor(document.documentElement.clientWidth / imgWidth);//屏幕的宽度除以图片的宽度等于一排可以承载图片的个数
    //Math.floor 小数向下取整
    // console.log(cols)
    cparent.style.cssText = "width:"+imgWidth*cols+"px;margin: 0px auto"//改变父节点的css中的宽度并且居中

    //获取每张图片的高度
    var boxHejight = [];
    for(var i= 0;i<ccontent.length;i++){
        if(i<cols){
            boxHejight[i]=ccontent[i].offsetHeight;
        }else {
            //得到图片的最小高度
            var minHeight =Math.min.apply(null,boxHejight);
            var minindex =getminheightLocation(boxHejight,minHeight);
            ccontent[i].style.position="absolute";
            ccontent[i].style.top = minHeight+"px";
            ccontent[i].style.left =ccontent[minindex].offsetLeft+"px";//ccontent[minindex].offsetLeft 表示最矮的图片距父级左侧的距离
            boxHejight[minindex]=boxHejight[minindex]+ccontent[i].offsetHeight;//表示最矮的图片加上他下面一张图片的高度当成一张图片的高度，那么他就不是最矮的了
        }

    }
    // console.log(minindex);

}
//得到最小高度图片的位置
function getminheightLocation(boxHejight,minHeight){
    for(var i in boxHejight){
        if(boxHejight[i]==minHeight){
            return i;
        }
    }
}


//获取子节点
function getChildElement(parent,content){
    var conArr=[];
    var allContent =parent.getElementsByTagName("*");//表示所有内容
    for(var i= 0;i<allContent.length;i++){
        if(allContent[i].className==content){
            conArr.push(allContent[i]);
        }
    }
    return conArr;
}

作 者 ：元 荣 

元荣
关注
js实现瀑布流效果
2202_75686168的博客
03-17 169
【代码】js实现瀑布流效果。
使用css实现瀑布流的效果
花途Jasmine的博客
11-16 320
使用css实现瀑布流的效果主要是通过display:flex弹性布局的方式。 注意要设置列数 图片的宽度要一致，否则图片显示会有问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用css来实现瀑布流的效果</title> <style> .waterfall{ p
瀑布流实现
11-07
网上找的瀑布流安卓实现源码demo，希望这个可以对你有用
HTML5 Canvas高空瀑布下落湖面动画
zhangmingming22的博客
11-03 903
HTML5 Canvas是一个神奇的网页技术，我们在Canvas画布上可以做任何有趣的事情。今天要分享的这款瀑布动画就是利用了HTML5 Canvas的相关特性实现的。记得我们在很早以前给大家介绍过一个超逼真的HTML5瀑布动画，也是在Canvas上完成的，非常酷。今天的这个瀑布更加美妙，因为它模拟了整个瀑布落入湖面的美妙景象，但是从逼真度上来说，还是稍微有待改进，不过个人觉得已经非常不错了。 在...
实现瀑布流的几种方式（效果图）
最新发布
z16638522031的博客
08-14 404
先获取父盒子的宽度，试试能塞下多少个小图片，当第一行满了后，接下来就换行，就会获取第一行中最小图片的高度，后再获取它距离左边的宽度，然后才用定位属性，将第二行的图片添加到第一行最小图片高度的下面，具体不好讲，认真看代码就能理解了。你就会发现他是垂直方向上的排列，只有第一列补充完后，第二列才开始补充，不是我们想要市面上所需要的横向排列瀑布流。是 CSS 中的一个属性，用于设置元素的内容应该被分割成多少列来显示，轻松地实现多列布局效果。一个样式就能实现我们要的效果，但是如果换成3列来看呢？
瀑布流的实现
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...
简单瀑布流实现
小马哥好棒哦
07-04 541
实现效果 这里实现了一个较为复杂的瀑布流效果，在基本的高度不一的瀑布流上，增加了占据两列宽度大小的cell，效果如图： fall.gif 具体实现 1，技术基础 这里使用了UICollectionView来展示瀑布流，通过自定义UICollectionView对象的collectionViewLayout，来实现对UICollectionView中ce
HTML5+CSS3+JS小实例：自适应瀑布流布局
01-24
在这个"HTML5+CSS3+JS小实例：自适应瀑布流布局"中，我们将探讨如何使用这些技术实现一个灵活且适应不同屏幕尺寸的瀑布流布局。 首先，HTML5作为网页的结构语言，它引入了许多新元素来更好地表达网页内容，如`...
html+css+js瀑布流效果
06-06
每个卡片元素通常包含图片或文字信息，它们会被CSS和JavaScript处理以达到瀑布流的效果。 CSS，即层叠样式表，是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。在瀑布流布局中，CSS...
html+css+js实现的8款图片展示设计，可用于制作网页版相册
07-04
CSS Flexbox或Grid布局可以轻松实现这一效果，同时JavaScript可以用来动态加载新图片并调整布局。 5. **平移滑动**：通过CSS3的`transform`属性，可以实现图片的平移滑动效果。在JavaScript中，可以监听滚动事件，...
html5 canvas流动的瀑布动画特效
11-06
html5 canvas流动的瀑布动画特效 html5 canvas流动的瀑布动画特效
HTML+CSS+JS实现图片的瀑布流布局
Transprant的博客
04-16 4220
HTML+CSS+JS实现瀑布流布局前言一、总体效果二丶HTML+CSS简单布局三.JS实现后续布局总结 前言 瀑布流布局简而言之就是类似瀑布流的布局嘛，这么一讲大家可能还是不是很了解明白，来来来，那现在我给大家上一个常见的实例: 相信大家在百度上搜索图片时的时候，网页图片的布局就是这样子的吧，什么？你还是不清楚瀑布流，那咱就再我看一个那没关系，淘宝大家应该再熟悉不过了吧! 我们可以发现图中每个商品框的高度不同的，因此导致我们的商品图片的高度布局都不在一个高度上。在百度搜索图片的时候我们发
HTml+js+css 实现浏览器图片的瀑布流
qq_31687191的博客
03-15 512
可以将照片文件放入images里实现功能，也可以通过遍历字典或者函数递归的方法将所有图片导入做成网页版的相册！ 实现文件结构： htmlL部分: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title&gt...
js 实现瀑布流
qq_56042698的博客
01-13 189
js 实现瀑布流
瀑布流的简单实现
lee_xudong的博客
11-17 445
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{margin:0;padding:0;} div{width:900px;border:1px solid red;margin:0 auto;overflow:hidden;} ul{width:250px;
瀑布流效果实现
sinat_41747081的博客
01-20 240
<!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-U...
js简单瀑布流实现
qq_41335337的博客
09-23 740
什么是瀑布流 瀑布流其实就是一种布局方式，比如说有很多模块，这些模块大小不一，怎样才能把这些模块相对漂亮的排列到一起？瀑布流就可以很好地解决这个问题。首先把这些模块的宽（高）都设置一样，然后让他们像瀑布一样从上到下依次排列。如果还不清楚的话，强烈建议大家去看一下百度美女图片，用到的就是瀑布流模型。（看前请自备纸巾）。 如何实现 1、这里我们用一些图片来简单实现一下瀑布流效果。 2、html内容 ...
详解瀑布流实现
曹定栓的博客
08-10 4174
瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式，视觉表现为参差不齐的多栏布局。最早采用此布局的是网站是 Pinterest，后逐渐在国内流行，比如花瓣，蘑菇街等。
原生JS+jQuery+CSS3实现瀑布流布局
本文将详细介绍瀑布流布局的实现方法，结合原生JavaScript、jQuery和CSS3技术。瀑布流布局是一种常见的网站设计策略，用于优化图片或卡片式内容在网页上的展示，使得它们看起来像是按照一定的视觉顺序自然流动，适应...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值