Teach you step by step how to implement waterfall flow layout using js

Take you step by step to conquer the waterfall flow layout

Preface

The waterfall flow layout is more popular now A page layout method, that is, multiple lines of equal width elements are arranged, equal width and unequal height , and the following elements are added to the end of the previous line in turn Short elements below .

Taobao's waterfall flow layout (mobile version) and the renderings we want to achieve (PC version) )~

many pictures (I prepared 40 pictures), and vscode development tools.

front-end code and add a style to the image so that the image is of equal width and displayed in the same row .

js code, you need to know the number of pictures in the first line, the serial number of the next picture and the previous line The sequence number of the shortest element, and the position .

1. First, we define a

container container to hold all images, use box container to load box-img container and then load each picture in this container, which will facilitate the writing of styles later.

2. Make the picture

appear in the same row - use the float:left; attribute for the box container.

be displayed with equal width - set

width:150px; to the box-img container, and set the img tag width:100%;Inherits 100% of the height of the parent container box-img.

4. In order to make the effect better-looking, we set the

effects to the container holding the image.

The complete front-end code is attached:

    
    
    
    
    




    

        

            

                
           
        
        /*.......后面接39个box，此处省略*/
    
    

Copy after login

imgLocation('container','box') function

The parent container 'container' and the child container 'box' that holds the image.

window.onload=function() {
    imgLocation('container','box')
}

get all the pictures to be placed

array 中Use document.getElementById(parent) to get the parent container;

getChildElement(cparent,content) method

All tags of the parent container, traverse all tags and use the if conditional statementto get the container with the class name box (a container that holds pictures), and save it Enter into a array that we built ourselves, and the return value is this array, which makes it easier to manipulate the position of the image through traversal later.

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
Copy after login

starts is the that needs to be placed in the position We use the following method:

window

the width of each picture, divide the twoand Rounding down can get the number of pictures that can be placed in the first row. Naturally, we also know the serial number of the picture that we need tooperate .

    //从谁开始是需要被摆放位置的
    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
Copy after login

最终整合一下就可以实现瀑布流的布局效果啦！

最后

以上就是瀑布流布局的实现过程，看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
文章可能有一些错误，欢迎评论指出，也欢迎一起讨论。

推荐学习：《JavaScript视频教程》