JS를 사용하여 폭포 흐름 레이아웃을 구현하는 방법을 단계별로 가르쳐주세요.
- 藏色散人앞으로
- 2023-04-05 15:45:292478검색
이 기사에서는 주로 JS를 사용하여 폭포 흐름 레이아웃을 구현하는 방법에 대해 설명합니다. 관심 있는 친구들은 아래를 살펴보세요.
폭포 흐름 레이아웃을 정복하기 위해 단계별로 진행하세요
머리말
폭포 흐름 레이아웃은 현재 널리 사용되는 페이지 레이아웃 방법입니다. 즉,
같은 너비의 여러 행요소입니다. 폭은 동일하고 높이가 동일하지 않음으로 정렬된 경우 다음 요소는아래가장 짧은요소에순서대로 추가됩니다. /코드>.多行等宽元素排列，等宽不等高，后面的元素依次添加到前一行最矮的元素下方。
它可以有效的降低页面的复杂度，节省很多的空间；并且，瀑布流的参差不齐的排列方式，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动，提供了很好的用户体验！例如淘宝的页面就采用了这种布局方式，给大家看看淘宝的瀑布流布局的效果图（手机端）以及我们要实现的效果图（PC端）吧~
思路准备
通过了解瀑布流布局的方式，我们来梳理一下实现它的步骤，方便我们代码的编写。
1、首先我们需要准备很多张图片（我这准备的是40张），还有vscode开发工具。
2、编写前端代码，给图片添加样式让图片等宽并同行显示。
3、编写js代码，要知道第一行图片数量，下一张图片的序号以及前一行最矮的元素的序号，还有摆放的位置。
正文
一、前端代码编写
1、首先我们定义一个container容器来装所有图片，在这个容器中用box容器装box-img容器再装入每张图片，这样方便之后样式的编写。
2、使图片同行显示--给box容器使用float:left;属性。
3、让图片等宽显示--给box-img容器设置width:150px;，img标签设置width:100%;继承父容器box-img高度的100%。
4、为了使效果更好看，我们给装图片的容器设置内边距，边框和阴影的效果。
前端完整代码附上：
<!DOCTYPE html>
<html>
<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">
<title>waterFall</title>
<script src="./index.js"></script>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
position: relative;
}
.box{
float: left;
padding: 5px;
}
.box-img{
width: 150px;
padding: 5px;
border: 1px solid #484848;
box-shadow: 0 0 5px #484848;
}
.box-img img{
width: 100%;
}
</style>
<body>
<div id="container">
<div>
<div>
<img src="./img/1.jpg" alt="">
</div>
</div>
/*.......后面接39个box，此处省略*/
</div>
</body>
</html>二、js代码编写
1、首先用window.onload=function(){}来实现页面加载完毕后立即执行的功能
在这个函数中，我们调用imgLocation('container','box')函数来呈现最终效果，传入的实参是父容器'container'以及装图片的子容器'box'。
window.onload=function() {
imgLocation('container','box')
}
2、实现imgLocation()函数功能
1）首先我们得获取所有要摆放的图片，并将其存入一个数组中
利用document.getElementById(parent)得到父容器；
调用getChildElement(cparent,content)方法，在这个方法中，先获取父容器所有标签，对所有标签遍历并用if条件语句得到类名为box的容器（装图片的容器），将其存入我们自己构建的一个数组中，返回值为这个数组，方便之后通过遍历来操作图片摆放的位置。
function imgLocation(parent,content){
var cparent=document.getElementById(parent)
//cparent下的所有的第一层的子容器 box
var ccontent=getChildElement(cparent,content)//数组，40个div
}
//取到父容器中的某一层子容器
function getChildElement(parent,content){
var contentArr=[]
var allContent=parent.getElementsByTagName('*')//通过标签来选中得到一个数组
//遍历allContent把其中类名为content的容器都存到contentArr数组中
for(var i=0;i<allcontent.length><h5 data-id="heading-9">2）得到这个<code>数组</code>后，找出<code>从谁开始</code>是需要<code>被摆放</code>
</h5>페이지의 복잡성을 효과적으로 줄이고 많은 공간을 절약할 수 있습니다. 게다가 폭포 흐름의 고르지 못한 배열은 인터페이스를 통해 사용자에게 여러 데이터 조각을 표시할 수 있으며 사용자가 이동할 수 있게 해줍니다. down 탐색에 대한 충동은 훌륭한 사용자 경험을 제공합니다! 예를 들어, 타오바오 페이지에서는 <p>타오바오의 폭포 흐름 레이아웃</p>(모바일 버전) 렌더링과 <p>우리가 달성하고자 하는 렌더링<strong>(PC 버전)을 보여드리겠습니다~</strong><img src="https:/%20/img.php.cn/upload/article/000/000/020/f953cf944ca409666b985a55f3380740-0.png" alt="JS를 사용하여 폭포 흐름 레이아웃을 구현하는 방법을 단계별로 가르쳐주세요." style="max-width:90%" style="max-width:90%" loading="lazy "> </p>
<h2 data-id="heading-2">준비를 생각하세요<strong></strong>폭포 흐름 레이아웃을 이해하고 코드 작성을 용이하게 하기 위해 이를 구현하는 단계를 정리하겠습니다. <strong></strong>1. 먼저 <strong>많은 사진</strong>(여기서는 40장의 사진을 준비했습니다)과 <strong>vscode</strong> 개발 도구를 준비해야 합니다. <strong></strong>2. 이미지 <strong>가 동일한 너비와 나란히 표시되도록 </strong> 프런트 엔드 코드를 작성하고 이미지 🎜에 스타일 🎜을 추가합니다. 🎜🎜3. 🎜js🎜 코드를 작성할 때 🎜첫 번째 행의 이미지 개수🎜, 🎜다음 이미지의 일련번호🎜, 🎜이전 행의 가장 짧은 요소의 일련번호🎜를 알아야 합니다. 그리고 🎜배치 위치🎜. 🎜<h2 data-id="heading-3">Text🎜<h3 data-id="heading-4">1. 프론트 엔드 코드 작성</h3>🎜🎜1 먼저 🎜container🎜를 정의합니다. 🎜모든 사진🎜을 보관할 컨테이너, 🎜box🎜컨테이너를 사용하여 🎜box-img🎜컨테이너를 로드한 다음 🎜각 사진🎜을 로드하면 나중에 스타일을 더 쉽게 작성할 수 있습니다. 🎜🎜🎜2. 그림을 🎜 같은 행에 표시하도록 🎜 - 상자 컨테이너에 🎜float:left; 속성을 사용합니다. 🎜🎜🎜3. 이미지 🎜를 동일한 너비 🎜로 표시하고 box-img 컨테이너에 🎜width: 150px를 설정하고 100%를 상속하도록 img 태그를 설정합니다. 상위 컨테이너 box-img 🎜의 높이입니다. 🎜🎜🎜4. 효과를 더 보기 좋게 만들기 위해 이미지를 담는 컨테이너에 🎜패딩, 테두리 및 그림자 🎜 효과를 설정했습니다. 🎜🎜전체 프런트 엔드 코드가 첨부되어 있습니다: 🎜<pre class="brush:php;toolbar:false"> //从谁开始是需要被摆放位置的
var winWidth=document.documentElement.clientWidth;//视窗宽度
var imgWidth=ccontent[0].offsetWidth;//图片宽度
var num=Math.floor(winWidth/imgWidth)//第一行能放几张图
2.JS 코드 작성
1. 먼저 window.onload=function(){}을 사용하여 페이지가 로드된 후 즉시 실행되는 함수를 구현합니다.
🎜이 함수에서는 🎜imgLocation('container','box') 함수를 호출합니다. 🎜 최종 효과를 나타내기 위해 전달된 실제 매개변수는 🎜부모 컨테이너🎜'컨테이너'와 이미지를 담는 🎜하위 컨테이너🎜'상자'입니다. 🎜//操作num+1张图 var BoxHeightArr=[] for(var i=0;i<ccontent.length><h4 data-id="heading-7">2. imgLocation() 함수 구현</h4> <h5 data-id="heading-8">1) 먼저 <code>모든 항목을 가져와야 합니다. </code>하여 <code>배열</code>에 저장합니다.🎜🎜 document.getElementById(parent)를 사용하여 상위 컨테이너를 가져옵니다. 🎜🎜이 메서드에서 🎜getChildElement(cparent,content) 메서드🎜를 호출합니다. , 먼저 상위 컨테이너의 모든 레이블🎜을 가져오고, 모든 레이블🎜을 순회하고 if 조건문🎜을 사용하여 클래스 이름 상자(이미지용 컨테이너)가 있는 컨테이너🎜를 가져온 다음 우리가 직접 만든 컨테이너🎜에 저장합니다. 🎜array🎜, 반환 값은 이 배열이며, 나중에 이미지의 위치를 조작하기 위해 순회하는 데 편리합니다. 🎜rrreee<h5 data-id="heading-9">2) 이 <code>배열</code>을 가져온 후 <code>누구</code>를 <code>배치</code>해야 하는지 알아보세요. code> 위치 🎜🎜다음 방법을 사용합니다. 🎜🎜먼저 🎜 창 🎜의 너비 🎜와 각 그림의 너비 🎜를 구하고, 둘을 나누고 🎜 반내림 🎜하여 🎜첫 번째 행 🎜을 얻습니다. 사진을 배치할 수 있기 때문에 우리는 자연스럽게 🎜작동🎜해야 하는 사진의 🎜일련번호🎜를 알고 있습니다. 🎜<pre class="brush:php;toolbar:false"> //从谁开始是需要被摆放位置的 var winWidth=document.documentElement.clientWidth;//视窗宽度 var imgWidth=ccontent[0].offsetWidth;//图片宽度 var num=Math.floor(winWidth/imgWidth)//第一行能放几张图
3）得到需要被摆放位置的图片序号后，确定其摆放位置
我们自己定义一个存储高度的数组，对前一行元素的高度进行遍历并存入数组，当遍历到需要被摆放位置的图片时，用Math.min()方法获取前一行高度最矮的元素高度，并用indexOf()方法获取到其下标。
再对我们所操作的这个图片容器的样式调整：
position：absolute;绝对定位，top值设置为前一行高度最矮的图片高度minHeight，left值设置为单张图片宽度乘这张图片的下标minIndex。
最后，不要忘啦，摆放好图片后，还要更新摆放的那一列的高度哟~
//操作num+1张图 var BoxHeightArr=[] for(var i=0;i<ccontent.length><p>最终整合一下就可以实现瀑布流的布局效果啦！</p> <h2 data-id="heading-11">最后</h2> <p>以上就是瀑布流布局的实现过程，看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～<br>文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。</p> <p>推荐学习：《<a href="https://www.php.cn/course/list/17.html" target="_blank">JavaScript视频教程</a>》<br></p></ccontent.length>
위 내용은 JS를 사용하여 폭포 흐름 레이아웃을 구현하는 방법을 단계별로 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!