实现瀑布流布局

最新推荐文章于 2022-11-08 09:46:56 发布
最新推荐文章于 2022-11-08 09:46:56 发布
阅读量301 收藏 1
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lilin38/article/details/53883558
版权

css实现：

建立以来test.html: 
<!DOCTYPE html>
<html>
<head>
	<title>css实现瀑布流</title>
	<meta charset="utf-8">
	<style type="text/css">
		.con{
			 -webkit-column-width:160px;
		    -moz-column-width:160px; 
			 -webkit-column-gap:5px;
			 -moz-column-gap:5px;
		}
		.con div{width:160px;
               margin:4px 0;}
	</style>
</head>
<body>
	<div class="con">
	<div><img src="img/P_00.jpg" /></div>
		<div><img src="img/P_01.jpg" /></div>
		<div><img src="img/P_02.jpg" /></div>
		<div><img src="img/P_03.jpg" /></div>
		<div><img src="img/P_04.jpg" /></div>
		<div><img src="img/P_05.jpg" /></div>
		<div><img src="img/P_06.jpg" /></div>
		<div><img src="img/P_07.jpg" /></div>
		<div><img src="img/P_08.jpg" /></div>
		<div><img src="img/P_09.jpg" /></div>
		<div><img src="img/P_010.jpg" /></div>
		<div><img src="img/P_011.jpg" /></div>
		<div><img src="img/P_012.jpg" /></div>
		<div><img src="img/P_013.jpg" /></div>
		<div><img src="img/P_014.jpg" /></div>
		<div><img src="img/P_015.jpg" /></div>
		<div><img src="img/P_016.jpg" /></div>
		<div><img src="img/P_017.jpg" /></div>
		<div><img src="img/P_018.jpg" /></div>
		<div><img src="img/P_019.jpg" /></div>
		<div><img src="img/P_05.jpg" /></div>
		<div><img src="img/P_06.jpg" /></div>
		<div><img src="img/P_07.jpg" /></div>
		<div><img src="img/P_08.jpg" /></div>
		<div><img src="img/P_09.jpg" /></div>
		<div><img src="img/P_010.jpg" /></div>
		<div><img src="img/P_011.jpg" /></div>
		<div><img src="img/P_012.jpg" /></div>
		<div><img src="img/P_013.jpg" /></div>
		<div><img src="img/P_05.jpg" /></div>
		<div><img src="img/P_06.jpg" /></div>
		<div><img src="img/P_07.jpg" /></div>
		<div><img src="img/P_08.jpg" /></div>
		<div><img src="img/P_09.jpg" /></div>
		<div><img src="img/P_010.jpg" /></div>
		<div><img src="img/P_011.jpg" /></div>
		<div><img src="img/P_012.jpg" /></div>
		<div><img src="img/P_013.jpg" /></div>
		<div><img src="img/P_03.jpg" /></div>
		<div><img src="img/P_04.jpg" /></div>
		<div><img src="img/P_05.jpg" /></div>
		<div><img src="img/P_06.jpg" /></div>
		<div><img src="img/P_07.jpg" /></div>
		<div><img src="img/P_08.jpg" /></div>
		<div><img src="img/P_09.jpg" /></div>
	</div>
</body>
</html>

Javascript实现：

<!DOCTYPE html>
<html>
<head>
	<title>原生js实现瀑布流</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="js/test.js"/></script>
	<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#main{
		position: relative;
	}

	.pin{
		float: left;
		padding: 15px 0 0 15px;
	}
	.box{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .box img{
        width:162px;
        height:auto;
    }

	</style>
</head>
<body>

	<div id="main">
		<div class="pin">
			<div class="box">
				<img src="img/1.jpg">
			</div>
		</div>
		<div class="pin">
        <div class="box">
            <img src="img/2.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/3.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/4.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/5.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/6.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/7.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/8.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/9.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/10.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/11.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/12.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/13.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/14.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/15.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/16.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/17.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/18.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/19.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/20.jpg"/>
        </div>
    </div>
    <div class="pin">
        <div class="box">
            <img src="img/21.jpg"/>
        </div>
    </div>


	</div>

</body>
</html>
test.js: 
window.οnlοad=function(){

    waterfall('main','pin');

    var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
    
    window.οnscrοll=function(){
        if(checkscrollside()){
            var oParent = document.getElementById('main');// 父级对象
            for(var i=0;i<dataInt.data.length;i++){
                var oPin=document.createElement('div'); //添加 元素节点
                oPin.className='pin';                   //添加 类名 name属性
                oParent.appendChild(oPin);              //添加 子节点
                var oBox=document.createElement('div');
                oBox.className='box';
                oPin.appendChild(oBox);
                var oImg=document.createElement('img');
                oImg.src='./img/'+dataInt.data[i].src;
                oBox.appendChild(oImg);
            }
            waterfall('main','pin');
        };
    }
}

/*
    parend 父级id
    pin 元素id
*/
function waterfall(parent,pin){
    var oParent=document.getElementById(parent);// 父级对象
    var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin
    var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽
    var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
    oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距

    var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
    for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
        var pinH=aPin[i].offsetHeight;
        if(i<num){
            pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
        }else{
            var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
            var minHIndex=getminHIndex(pinHArr,minH);
            aPin[i].style.position='absolute';//设置绝对位移
            aPin[i].style.top=minH+'px';
            aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
            //数组 最小高元素的高 + 添加上的aPin[i]块框高
            pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
        }
    }
}

/****
    *通过父级和子元素的class类 获取该同类子元素的数组
    */
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;
}
/****
    *获取 pin高度 最小值的索引index
    */
function getminHIndex(arr,minH){
    for(var i in arr){
        if(arr[i]==minH){
            return i;
        }
    }
}


function checkscrollside(){
    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);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
    var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性
    var documentH=document.documentElement.clientHeight;//页面高度
    return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true，触发waterfall()函数
}
未完待续。。。




哇哇林
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript--瀑布流
zz410675629的专栏
08-29 781
简单瀑布流代码实现 html代码如下 瀑布流-zhangzhang *{padding: 0;margin:0;} #main{ position: relative; } .pin{ padding: 15px 0 0 15px; float:left; } .box{
两行CSS代码实现瀑布流
Mr.Starl
06-30 235
/*分几列*/ column-count: 3; /*不留白*/ break-inside: avoid; /*列间距，可有可无，默认30px*/ column-gap: 20px; 其他CSS属性自行设置
瀑布流布局的实现
小皮咖的博客
10-30 1450
提出问题 如何实现图片的瀑布流布局？ 实现思路 两种方法，一种是 CSS 实现，能实现页面响应式瀑布流，使用 column-width 和 column-gap 属性。另一种是 JS 实现，通过获取窗口宽度计算首行填充图片个数，定义行高度数组。然后将 DOM 操作修改第二行第一个元素的绝对定位，使其位于上一行高度最小的元素之下，并求和这两个元素的高度，更新高度数组。 解决问题详细代码请点击这
实现瀑布流布局的四种方法
热门推荐
Smile_666666的博客
05-13 2万+
一、 什么是瀑布流布局 1、是什么 页面上是一种 参差不齐 的多栏布局，类似上图所示随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，大部分为图片，图片 固定 宽度，高度 不一，根据原比例缩放到宽度达到固定的要求，每行排满后，新的图片添加到后面 2、特点 固定宽度，高度不一 岑参不齐的布局 以图片为主 二、有什么优缺点 1、优点 节省空间：降低页面的复杂 对于 触屏设备非常友好：通过向上滑动浏览，交互方式更符合直觉 良好的视觉体验：浏览时不会被页面整整齐齐的高度影响，
两行两列瀑布流图片排列布局（uniapp、小程序）
weixin_58387292的博客
11-08 1563
【代码】两行两列瀑布流图片排列布局（uniapp、小程序）
微信小程序-实现瀑布流布局demo源代码
05-08
本教程将通过一个具体的实例——“微信小程序-实现瀑布流布局demo”来探讨如何在微信小程序中实现瀑布流布局和无限下拉加载功能。 首先，我们要理解瀑布流布局。这是一种常见的网页设计布局方式，其特点是以多列...
三种方式实现瀑布流布局
10-20
本文将介绍三种实现瀑布流布局的方法：使用原生JavaScript、jQuery以及CSS。 首先，我们来看一下如何使用CSS实现瀑布流布局。在CSS中，我们可以利用多列布局（Multi-column layout）来实现瀑布流效果。主要的CSS...
vue实现简单瀑布流布局
11-21
在 Vue 中实现瀑布流布局可以提供一种美观且响应式的图片展示方式，使得元素在页面上自适应地排列，类似于瀑布逐级下落的效果。在这个场景中，我们将探讨如何使用 Vue 构建一个简单的瀑布流布局，并结合 `vue-lazy...
用CSS3实现瀑布流布局的示例代码
09-24
通过CSS3的列属性（Column properties），我们可以轻松实现瀑布流布局。主要的CSS属性包括`column-count`、`column-width`、`column-gap`和`break-inside`。 `column-count`属性用于规定元素应该被分隔的列数。例如...
纯js实现瀑布流布局及ajax动态新增数据
10-22
3. **注意问题**：文中提到的程序存在的几个缺点，包括非响应式处理、所有图片重新定位的效率问题、图片尺寸的获取时机，以及实际项目中应由服务器提供图片尺寸等，都是在实现瀑布流布局和动态加载时需要注意的。...
瀑布流完整实现demo
03-01
这是一个完整的瀑布流的demo，实现方法也比较清爽，值得一看
超级简单的瀑布流加载数据
花神的博客
03-21 1万+
瀑布流是我们经常用到的加载方式，对于大量数据加载优化效果十分明显，这里我使用非常简单的代码来实现瀑布流，需要的朋友尽管copy：<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"/> <meta name="aplus-terminal" content="1"> <meta na
css3实现瀑布流布局+缺点用户体验差，但是性能高于js，jq，使用column属性
於刚的博客
08-19 2725
#main{ -webkit-column-width: 202px; -moz-column-width:202px; } .box{ padding: 10px 0 0 15px; } .pic{ padding:10px; border: 1px solid #cccccc; border-radius: 5px; box-shado
浅析瀑布流布局原理及实现方式
qq_47443027的博客
08-29 2万+
一、瀑布流 　　瀑布流布局有一个专业的英文名称Masonry Layouts。瀑布流布局已经有好多年的历史了，我最早知道这个名词的时候大约是在2012年，当时Pinterest网站的布局就是使用的这种流式布局，简言之像Pinterest网站这样的布局就称之为瀑布流布局，也有人称之为Pinterest 布局。 　　瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。 　　瀑
瀑布流布局的原理及实现
Preeminent
01-13 1万+
瀑布流很漂亮~但其实实现起来很简单，让我们来实现一下吧瀑布流布局的原理 瀑布流布局要求要进行布置的元素等宽，然后计算元素的宽度与浏览器宽度之比，得到需要布置的列数。 创建一个数组，长度为列数，里面的值为已布置元素的总高度（最开始为0） 然后将未布置的元素依次布置到高度最小的那一列，就得到了瀑布流布局。 瀑布流布局实现下面是我实现的瀑布流布局 代码、预览
基于YOLOv5的猫狗鼠情绪分类模型训练实践与项目复盘
最新发布
09-11
在宠物情绪识别领域，利用深度学习技术进行分类是一个热门且具有实际意义的应用场景。基于此，我选择了YOLOv5进行分类模型的训练，用于识别猫、狗、鼠的不同情绪类型。通过自定义数据集，结合YOLOv5强大的分类功能，开发了一个轻量化的情绪分类模型。 1. YOLOv5 分类模型的应用：虽然YOLOv5更多应用于目标检测，但分类模型在小数据集或特定任务上也能发挥强大的作用。本文实践展示了如何使用YOLOv5进行高效的情绪分类任务。 2. 自定义数据集的准备：高质量的数据集是成功训练模型的基础。在这个项目中，通过图像增强等手段，增加了训练数据的多样性，显著提高了模型的表现。 3. 模型超参数调整的重要性：超参数（如学习率、批次大小、训练轮次）的选择直接影响到模型的训练效果。根据不同的任务场景，灵活调整这些参数，可以得到显著的性能提升。 4. 模型优化与部署：通过剪枝和量化技术，可以在不明显降低模型性能的情况下，减少模型的大小和计算需求，这对部署到资源有限的设备非常重要。 ------------------上传为权重文件，需要安装环境欢迎咨询
java基于ssm+jsp班级同学录网站管理系统源码 带毕业论文+PPT
09-11
1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、需要项目部署的可以私信 3、项目代码都经过严格调试，代码没有任何bug！ 4、该资源包括项目的全部源码，下载可以直接使用！ 5、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 6、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
Sigrity-What’s New in Clarity 3D Transient Solver.rar
09-11
Sigrity-What’s New in Clarity 3D Transient Solver.rar 在Sigrity 2022.1基础版本中，Clarity3D没有重大增强 瞬态求解器。 相关文件 ■ Clarity 3D瞬态求解器用户指南 ■ Clarity 3D瞬态求解器教程 注：要了解其他Sigrity产品中的新功能和增强功能，请参阅 Sigrity发布概述和常用工具 Cadence Sigrity和系统分析2022.1中的新内容
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值