无限瀑布流 JS原生代码

最新推荐文章于 2024-09-23 15:34:46 发布
最新推荐文章于 2024-09-23 15:34:46 发布
阅读量668 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jensen_Yao/article/details/64920747
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/initialize.css">
    <style>
        .out {
            position: relative;
            margin: 0 auto;
        }

        .in {
            float: left;
        }

        .img {
            margin: 10px;
            padding: 10px;
            border-radius: 10px;
            border: 1px solid #666;
            box-shadow: 0 0 5px #ff7ba5;

        }
    </style>
</head>
<body>
<div class="out">
    <div class="in">
        <div class="img"><img src="img/i1.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i2.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i3.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i4.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i5.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i6.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i7.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i8.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i9.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i10.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i11.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i12.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i13.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i14.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i15.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i3.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i4.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i5.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i6.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i7.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i8.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i9.jpg" alt=""></div>
    </div>
    <div class="in">
        <div class="img"><img src="img/i10.jpg" alt=""></div>
    </div>
</div>

<script>
    window.onload = function () {
        var data = '{"data":[{"src":"i1.jpg"},{"src":"i2.jpg"},{"src":"i3.jpg"},{"src":"i4.jpg"},{"src":"i5.jpg"},{"src":"i6.jpg"},{"src":"i7.jpg"},{"src":"i8.jpg"},{"src":"i9.jpg"},{"src":"i10.jpg"},{"src":"i11.jpg"},{"src":"i12.jpg"},{"src":"i13.jpg"},{"src":"i14.jpg"},{"src":"i15.jpg"}]}';
        var out = document.getElementsByClassName('out')[0];
        var inName = document.getElementsByClassName('in');
        function pbl() {
            var arr = [];
            var winWid = document.documentElement.clientWidth;
            var imgWid = inName[0].offsetWidth;
            num = Math.floor(winWid / imgWid);
            if(num<1) return;
            out.style.width = num * imgWid + 'px';
            for (var i = 0; i < inName.length; i++) {
                if (i < num) {
                    arr.push(inName[i].offsetHeight);
                    inName[i].style.position = 'static';
                } else {
                    inName[i].style.position = 'absolute';
                    var minArr = Math.min.apply(null, arr);
                    var index = arr.indexOf(minArr);
                    inName[i].style.top = minArr + 'px';
                    arr[index] += inName[i].offsetHeight;
                    inName[i].style.left = inName[index].offsetLeft + 'px';
                }
            }
        }
        pbl();
        window.onscroll = function () {
            var widH = document.documentElement.clientHeight; //获取时候的高度
            var tTop = inName[inName.length - 1].offsetTop; //获取最后一张图片到顶部的距离
            var hdH = document.documentElement.scrollTop||document.body.scrollTop; //获取滑动的高度
            if(tTop<widH+hdH){
                var jieGuo = JSON.parse(data);
                for(var i=0;i<jieGuo.data.length;i++){
                    var div1 = document.createElement('div');
                    div1.className = 'in';
                    var div2 = document.createElement('div');
                    div2.className = 'img';
                    var img = new Image;
                    img.src = 'img/'+jieGuo.data[i].src;
                    div2.appendChild(img);
                    div1.appendChild(div2);
                    out.appendChild(div1);
                }
                pbl();
            }
        };
        window.onresize = function () {
            pbl();
        }
    };



</script>
</body>
</html>

蚂蚁上的大象
关注
专栏目录
js原生代码写瀑布流
Vimo的Blog
06-01 812
html 部分 瀑布流 //sheng
js实现瀑布流效果
12-22
js实现瀑布流效果，下拉继续加载数据，移动端自适应屏幕
使用js写一个简单的【瀑布流】布局效果
最新发布
我们好像在哪见过 私
09-23 763
使用js写一个简单的【瀑布流】布局效果
JS基础实现瀑布流效果【附源码】
huangfuyk.的博客
03-05 5242
话不多说，直接上代码。如下： CSS部分： <style> .cont{margin: 0 auto;position: relative;} .box{float: left;padding: 4px;} .imgbox{ padding: 4px;} .imgbox img{width: 200px;display: block;border-rad...
瀑布流主要JS代码
wei_jie_zhang的专栏
12-02 683
$(document).ready(function () { var $container = $('.list'); $container.imagesLoaded(function () { $container.masonry({ itemSelector: '.box
js-瀑布流代码
weixin_34050519的博客
09-27 199
2019独角兽企业重金招聘Python工程师标准>>> ...
原生JavaScript实现瀑布流布局
10-23
总的来说，这个原生JavaScript实现的瀑布流布局方案依赖于动态计算和绝对定位，它通过监听滚动事件，实现了页面滚动时内容的无限加载，同时保持了美观的瀑布流布局效果。这种方式相对于使用CSS Flexbox或Grid等现代...
微信小程序-实现瀑布流布局demo源代码
05-08
本教程将通过一个具体的实例——“微信小程序-实现瀑布流布局demo”来探讨如何在微信小程序中实现瀑布流布局和无限下拉加载功能。 首先，我们要理解瀑布流布局。这是一种常见的网页设计布局方式，其特点是以多列...
原生js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
09-01
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的瀑布流布局，同时结合无限加载功能和鼠标悬停时的图片遮罩效果。瀑布流布局是一种流行的设计模式，常用于展示图片或内容，使得页面看起来既美观又有序...
js简单瀑布流图片无限加载带鼠标悬停图片遮罩效果
09-01
在JavaScript中实现瀑布流布局，通常需要考虑到不同元素的宽高比和浏览器窗口的实时调整。 【无限滚动】 无限滚动（Infinite Scroll）或称滚动加载，是一种网页设计技术，允许用户通过滚动页面来加载更多内容，而...
原生JS实现无限滚动瀑布流布局
weixin_41105030的博客
03-28 1384
API HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。 Element.clientWidth 属性表...
无限加载jQuery瀑布流代码
09-27
无限加载jQuery瀑布流代码
纯原生js无限瀑布流
09-01
纯原生js无限瀑布流
jQuery瀑布流js代码
zh__quan的博客
08-02 271
$(function () { // 1. 实现瀑布流布局 waterFull(); // 2. 动态加载新的盒子 $(window).on('scroll', function () { if(checkWillLoadImage()){ // 2.1 造数据 var dataArr = [...
js：瀑布流
weixin_45851686的博客
09-11 125
源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit...
js 瀑布流
janeen-jn的博客
08-25 293
html: <div class="main"> </div> css: <style> * { margin: 0; padding: 0; } .main { position: rela...
js 瀑布流
binglinglong2的专栏
03-20 1044
js瀑布流的常见思路 1.将图片分成几列，这几列的父层元素的可设float属性为left。 2.取得float的高度值，并获取高度最小的元素的index值。 3新建一个图片元素，并将该图片导入到高度最小的元素中。 以下为一些测试代码，其js部分则是用的网上比较流行的一个代码，并做了稍微修改。 html部分 .wrap { margin: 20px auto; width:
js瀑布流
susuzhe
03-15 358
$(function(){ var cols = $(".col"); $(window).scroll(function(){ //滚动条距顶部距离 var top = $(window).scrollTop(); //当前浏览器高度 var height = $(window).height(); //文档高度 va
JS瀑布流
qq_38851897的博客
12-23 420
这个页面主要通过前端技术中非常流行的瀑布流技术来展示图片，瀑布流技术的原理主要分为两部分： 1.瀑布流的排版 一，先将每张图片的宽度写死固定为某个值，这时每张图片的高度也随之等比例缩小，保证每张图片的宽度都一样。 二，根据浏览器的可视界面的宽度除以每张图片的宽度得出浏览器一行最多能够放几张图片Num，即Num = Math.floor（clientWidth / imgwidth） 三，这...
使用原生JavaScript和LESS构建瀑布流布局
"原生JavaScript+LESS实现瀑布流的网页布局技术" 在Web开发中，瀑布流布局是一种常见的展示方式，常用于图片展示、商品列表等场景，它可以使页面元素自适应地排列，形成一种类似瀑布的效果，每列的高度根据内容动态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值