JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현
- 零下一度원래의
- 2017-05-08 10:28:471399검색
이 글에서는 JavaScriptWaterfall Flow Layout의 구현 코드를 주로 소개하고 있으니 관심 있는 분들은 참고하시면 좋을 것 같습니다.
먼저 살펴보겠습니다. 폭포수 흐름 레이아웃이 무엇인지 이야기해 보세요.
은 그림과 같이 너비가 같고 높이가 다른 데이터 블록 묶음으로 구성된 페이지입니다.
현재 많은 웹사이트 Mogujie와 같은 이러한 종류의 폭포 흐름 레이아웃을 사용하십시오. 메일리는 기다리라고 말했다.
먼저 구현하려면 어떻게 배열되어 있는지 이해해야 합니다.
각 행의 열 수는 이미지 너비와 페이지 너비의 비율을 기준으로 계산됩니다. .
첫 번째 행은 순서대로 배열되고, 나머지 데이터 블록은 각 열의 가장 낮은 열에서 선택되어 순서대로 배열됩니다.
먼저 프레임워크를 구현하세요.
<p id = "main"> <p class = "box"> <p class = "pic"> <img src = "images/0.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/1.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/2.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/3.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/4.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/5.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/6.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/7.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/8.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/9.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/10.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/11.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/12.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/13.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> <p class = "box"> <p class = "pic"> <img src = "images/14.jpg" alt="JavaScript를 사용하여 폭포 흐름 레이아웃 효과 코드 구현" > </p> </p> </p>
14개의 이미지가 여기에 정의되어 있습니다. 각 이미지는 class= box의 속성 과 class= "pic"의 속성으로 둘러싸여 있으며 해당 스타일은 CSS에 정의되어 있습니다. >
*{
padding: 0px;
margin: 0px;
}
#main{
position: relative;
}
.box{
/* display: inline-block;*/
padding: 15px 0px 0px 15px;
float: left;
}
.pic{
padding: 10px;
border-radius: 5px;
border:1px solid #ccc;
box-shadow: 0 0 5px #ccc;
}
.pic img{
width: 165px;
height: auto;
}
</style>렌더링은 다음과 같습니다. 
js로 구현한 Waterfall Flow 레이아웃입니다. 코드를 작성하기 전에 box 속성을 사용해야 하고 js에 정의된 클래스를 가져오는 직접적인 메소드가 없기 때문에 여기에 클래스를 가져오는 메소드를 작성해야 합니다.
function getByClass(parent,className){
var boxArr = new Array();//用来获取所有class为box的元素
oElement = parent.getElementsByTagName('*');
for (var i = 0; i <oElement.length; i++) {
if(oElement[i].className == className){
boxArr.push(oElement[i]);
}
};
return boxArr;
}둘 매개변수는 찾을 상위 요소와 클래스 이름입니다. 다음으로 함수 작성:
//首先在onload函数中调用函数
window.onload = function(){
waterFull('main','box');
}
function waterFull(parent,children){
//先获得父元素及其底下所有的class = box的元素
var oParent = document.getElementById(parent);
var oBoxs = getByClass(oParent,children);
//我们在前面说过，数据块的列数我们是希望不变的。由于每个数据块都是等宽的，所以可以以第一个数据块的宽度为准，获得数据块的宽度。再计算数据块的列数，向下取整。
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
接下来设置父元素的样式，我们需要获得它的宽度，并且使其居中
oParent.style.cssText = 'width:' cols * oBoxW + 'px; margin: 0 auto';
//在定义好了所有的样式之后，就是排列数据块。首先第一行是直接排列的。定义一个数组存放每一列的高度，从第二行开始，使得每一个数据块都排在高度最低的那一列。首先得遍历所有的box，即oBoxs
var arrH = []; //定义数组存放每一列的高度
for(var i = 0; i< oBoxs.length; i++){
//当是第一行时，直接将数据块依次排列，并在数组中记录每一列的高度
if(i < cols){
arrH[i] = oBoxs[i].offsetHeight;
}
//当i>cols时，即要对前面的所有列的高度进行遍历，将下一个图片放在合适的位置。
else{
//首先在数组中找到高度最低的列数。我们都知道有Math.min可以找到最小的数字，但是它接受的参数必须是一组数字，所以在这里我们要用Math.min.apply()方法
var minH = Math.min.apply(null, arrH); //定义一个变量，存放数组中最小的高度
//在找出了最小高度之后，我们需要知道它的索引，才能够为接下来的数据块找到合适的位置，所以在下面又定义了一个找出最小值下标的函数。
//定义一个变量去接受getMinhIndex函数的返回值
var minIndex = getMinhIndex(arrH,minH);
//在获得了高度最小的列数的索引后，就可以将下一个元素放到合适的位置
oBoxs[i].style.position = 'absolute';
oBoxs[i].style.top = minH + 'px';
oBoxs[i].style.left = minIndex * oBoxW + 'px';
//将当前的数据块终于都放到了合适的位置，但不要忘了更新arrH数组
arrH[minIndex] += oBoxs[i].offsetHeight;
}
}
}
//获取当前最小值得下标
function getMinhIndex(array,min){
for(var i in array){
if(array[i] == min)
return i;
}
}위는 폭포 흐름 레이아웃의 완전한 js 구현 코드입니다. 렌더링은 다음과 같습니다: 
window.onload = function(){
waterFull('main','box');
}
function waterFull(parent,children){
var oParent = document.getElementById(parent);
//var oBoxs = parent.querySelectorAll(".box");
var oBoxs = getByClass(oParent,children);
//计算整个页面显示的列数
var oBoxW = oBoxs[0].offsetWidth;
var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽度，并且居中
oParent.style.cssText = 'width:'+oBoxW * cols +'px; margin: 0 auto';
//找出高度最小的图片，将下一个图片放在下面
//定义一个数组，存放每一列的高度，初始化存的是第一行的所有列的高度
var arrH = [];
for(var i = 0; i< oBoxs.length ; i++){
if(i < cols){
arrH.push(oBoxs[i].offsetHeight);
}
else{
var minH = Math.min.apply(null,arrH);
var minIndex = getMinhIndex(arrH,minH);
oBoxs[i].style.position = 'absolute';
oBoxs[i].style.top= minH + 'px';
oBoxs[i].style.left = minIndex * oBoxW + 'px';
// oBoxs[i].style.left = arrH[minIndex].;
arrH[minIndex] += oBoxs[i].offsetHeight;
}
}
}
function getByClass(parent,className){
var boxArr = new Array();//用来获取所有class为box的元素
oElement = parent.getElementsByTagName('*');
for (var i = 0; i <oElement.length; i++) {
if(oElement[i].className == className){
boxArr.push(oElement[i]);
}
};
return boxArr;
}
//获取当前最小值得下标
function getMinhIndex(array,min){
for(var i in array){
if(array[i] == min)
return i;
}
}html 및 css 코드 : 瀑布流布局