瀑布流三部曲之javascript实现

最新推荐文章于 2023-02-05 23:48:33 发布
最新推荐文章于 2023-02-05 23:48:33 发布
阅读量297 收藏
点赞数
分类专栏： 前端学习 文章标签： javascript 瀑布流
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14886653/article/details/52613455
版权

javascript 瀑布流布局，实现原理，是通过javascript动态的对每个图片盒子进行布局，虽然比之css3相对复杂，但其方便动态加载图片，实现滚动加载效果。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript瀑布流</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <div id="main">
        <div class="pin">
            <div class="box">
                <img src="images/9.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/10.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/13.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/12.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/11.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/14.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/15.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/16.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/17.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/18.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/19.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/21.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/19.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/21.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/19.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/21.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/19.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/21.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/19.jpg"/>
            </div>
        </div>
        <div class="pin">
            <div class="box">
                <img src="images/21.jpg"/>
            </div>
        </div>
    </div>
    <script rel="javascript" type="text/javascript" src="js/waterfall.js"></script>
</body>
</html>

//js代码 写有详细注释，不在细说
window.onload = function(){
    waterfall("main","pin");
    var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
    window.onscroll = function()
    {
        if (checkScollSide())
        {
            //构建元素，进行动态加载
            var oParent = document.getElementById("main");
            for(var i = 0;i < dataInt.data.length;i++)
            {
                var oPin = document.createElement("div");
                oPin.className = "pin";
                oParent.appendChild(oPin);
                var oBox = document.createElement("div");
                oBox.className = "box";
                oPin.appendChild(oBox);
                var oImg = document.createElement("img");
                oImg.src = "images/" + dataInt.data[i].src;
                oBox.appendChild(oImg);
            }
            waterfall("main","pin");
        }
    }
}
//通过父元素获取一类子元素数组
function getClassObj(parent,className)
{
    var obj = parent.getElementsByTagName("*");
    var pins = [];
    for (var i = 0;i < obj.length;i++)
    {
        if(obj[i].className == className)
        {
            pins.push(obj[i]);
        }
    }
    return pins;
}
//检查是否滑动滚动条
function checkScollSide()
{
    var oParent = document.getElementById("main");//获取顶层容器
    var aPin = getClassObj(oParent,"pin");//通过类名获取每个图片的外包围盒子
    var lastPinH = aPin[aPin.length-1].offsetTop + Math.floor(aPin[aPin.length-1].offsetHeight/2);//取到最后一个图片盒子中间距离文档顶部的距离
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//获得滚动条滚动高度，兼容性写法
    var documentH = document.documentElement.clientHeight;//获得窗口高度可视区域高度
    return (lastPinH < scrollTop + documentH) ? true:false;//比较最后一个盒子与文档高度，判断是否动态加载
}
function getMinHeightIndex(arr,minH)//返回数组中某一个数的索引值
{
    for(var i in arr)
    {
        if (arr[i] ==minH)
        {
            return i;
        }
    }
}
function waterfall(parent,pin)
{
    var oParent = document.getElementById(parent);
    var aPin = getClassObj(oParent,pin);
    var iPinW = aPin[0].offsetWidth;
    var num = Math.floor(document.documentElement.clientWidth/iPinW);
    oParent.style.cssText = "width:" + iPinW*num + "px;margin:0 auto";
    //上面三行代码,使瀑布流居中显示

    var pinHArr = [];
    for (var i = 0;i < aPin.length;i++)
    {
        var pinH = aPin[i].offsetHeight;
        if(i < num)
        {
            pinHArr[i] = pinH;
        }
        else
        {
            var minH = Math.min.apply(null,pinHArr);//取出数组中的最小值
            var minHIndex = getMinHeightIndex(pinHArr,minH);//获取数组中最小值的索引
            aPin[i].style.position="absolute";//设置为绝对定位,下面两行为职位具体位置
            aPin[i].style.top = minH + "px";
            aPin[i].style.left = aPin[minHIndex].offsetLeft + "px";
            pinHArr[minHIndex] += aPin[i].offsetHeight;//修改该索引盒子的高度
        }
    }
}
77314
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JavaScript实现瀑布流布局
10-23
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
原生JavaScript+LESS实现瀑布流
10-25
接下来，我们将使用原生JavaScript来实现瀑布流的关键逻辑。以下是一些核心步骤： 1. **获取元素**：首先获取所有的`.box`元素，并记录其数量。 2. **计算列数**：基于窗口宽度计算每列可以容纳的`.box`数量，通常...
瀑布流三部曲之jquery
qq_14886653的专栏
09-21 214
jquery简化了javascript实现，html 和css部分代码与http://blog.csdn.net/qq_14886653/article/details/52613455 javascript实现瀑布流相同，所以不再给出。下面给出js代码：$( window ).on( "load", function(){ // 调用waterfall函数 waterfall()
JavaScript之动画特效
m0_64599482的博客
06-19 209
移动端浏览器兼容性较好，不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方。比如触屏事件touch(也称触摸事件)，Android和IOS都有。touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可以相应用户手指(或触控笔)对屏幕或者触控板操作。touchstart：手指触摸到一个DOM元素时触发。touchmove：手指在一个DOM元素上滑动时触发。tiuchend：手指从一个DOM元素上移动时触发。
Android自定义控件三部曲文章索引
Leslie_LN的博客
09-27 366
Android自定义控件三部曲文章索引 <div class="article_manage clearfix"> <div class="article_l"> <span class="link_categories"> 标签： <a href="http://www.
【Vue/React】Vue中的瀑布流（逻辑清晰,可拓展性）
Umbrella_Um的博客
12-27 711
需要考虑的问题 Vue中获取DOM节点元素 涉及请求数据如何确认数据到达再去渲染DOM节点 涉及图片加载渲染的，如何监听DOM渲染完毕再去计算元素高度（Bug：如果涉及图片加载的，在网络不快的情况下，Vue中拿到的当前含有图片的元素的高度是不正确的，会影响后续的瀑布流布局） 如何实现根据设备屏幕大小来自动计算当前瀑布流卡片的宽度，并且可自定义距离屏幕边距以及卡片与卡片元素间的距离（自定义拓展） ...
0 2JavaScript
weixin_44576550的博客
05-27 372
JavaScript JavaScript是运行在客户端的脚本语言 1.js基础 浏览器执行JS简介 浏览器分成两部分:渲染引擎和JS引擎 渲染引擎∶用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器
【前端】【JavaScript】基础知识
我的的博客哦
02-05 3905
二. JavaScript 输入输出语句 方法 说明 alert(msg) 浏览器弹出警示框 console.log(msg) 浏览器控制台打印输出信息 prompt(into) 浏览器弹出输入框，用户可以输入 三. 变量 (一) 变量的使用 (二) 变量语法扩展 (三) 变量命名规范 四. 数据类型 (一) 简单数据类型 简单数据类型 说明 默认值 Number 数字型，包含整型，浮点型值，如21，0.21 0 Boolean
JavaScript - 移动端网页特效
qq_52822043的博客
03-28 686
1. 触屏事件 触屏事件touch也称为触摸事件。 touch对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触摸笔）对屏幕或者触控板操作。 1）常见的触屏事件 <style> div { width: 100px; height: 100px; background-color: pink; } </styl...
JavaScript基础（3）——移动端网页特效
curacaolb的博客
07-17 374
目标及目录 触屏事件 触屏事件概述 移动端浏览器兼容性较好，所以我们不需要考虑以前JS的兼容性问题，可以放心的使用原生JS书写效果，但是移动端也有自己独特的地方，比如触屏事件touch（也称触摸事件），Android和IOS都有。 touch对象代表一个触摸点。触摸点可能是手指，也可能是触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。 触摸事件对象（TouchEvent） TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点
JS实现pc端、移动端网页特效
nknmn
04-20 694
目录 一. PC端网页特效 二. 移动端网页特效 一. PC端网页特效 PC端网页特效 1.元素偏移量 offset 系列 （1）offset 偏移量：使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等 （2）特点：动态获取（随着该元素位置、大小的变化动态变化） （3）作用： 1.可以获得元素距离带有定位的父元素的位置 2....
javascript瀑布流布局实现方法详解
10-22
总的来说，实现JavaScript瀑布流布局需要理解HTML结构、CSS样式以及JavaScript事件和DOM操作。通过对元素的动态布局和数据的实时加载，我们可以创建出一个既美观又响应式的瀑布流布局。这种布局方法在博客、产品展示...
JavaScript实现瀑布流以及加载效果
10-20
【JavaScript实现瀑布流及其加载效果】瀑布流布局是一种常见的网页设计模式，最早由Pinterest引入，其特点是内容以不规则的多列形式呈现，随着页面滚动不断加载新的内容。这种布局方式在图片展示类网站中尤为常见，...
javascript实现瀑布流加载图片原理
10-22
主要为大家介绍了javascript实现瀑布流加载图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
不知道大小的图片在盒子中垂直居中
qq_14886653的专栏
09-22 983
1.使用display:table-cell<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <style type="text/css"> div { display:table-cell; height:300p
中英文切换导航
qq_14886653的专栏
09-21 687
总结学到的一些新的特效使用css3 及jquery两种方法实现中英文切换导航。 css3版：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>中英文切换导航条</title> <style> *{ padding: 0;
jquery操作与滚动条相关操作
qq_14886653的专栏
09-09 512
1.返回顶部按钮实现 用到两个函数，和一个属性，scroll（）函数检测滚动条事件，通过scrollTop()得到滚动条离页面顶部的距离，文档内高度而不是，滚动条上的高度，点击按钮设置文档scrollTop的值为0,即可返回顶部。赋值下边代码，替换.top为按钮类即可。$(function(){ $(window).scroll(function(){ var t=$(this).s
@font-face使用
qq_14886653的专栏
09-09 498
1.下载需要的图标文件，一般需要4个字体文件，提供一个网址：https://icomoon.io/#icons（网上还有很多）。下载到字体文件后会得到一个压缩包，里面有需要的东西,可以查看里面的style.css获得详细用法。下面是我的方法： 1.html实体+font 首先得定义@font-face{ font-family:myfont;//这个可以自定义 src:url(
uniapp实现瀑布流
最新发布
10-18
uniapp可以通过使用mescroll-uni插件来实现瀑布流效果。具体步骤如下： 1. 安装mescroll-uni插件 在uniapp项目的根目录下打开终端，输入以下命令安装mescroll-uni插件： ``` npm install mescroll-uni --save ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值