JS 瀑布流

阅读 5272
收藏 342
2017-01-10
原文链接:www.jianshu.com

0. 前言

在我们浏览各大网站,网页,手机APP的时候,可能会遇到很多图片大小不一,看起来杂乱无章,其实,它们是狠有顺序的,排列在一起。这就应用到了网站中一种很流行的页面布局---瀑布流,又称瀑布流布局


纳尼.jpg

1. 简介

瀑布流:又称瀑布流式布局,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动而不断加载。


瀑布流.gif

2. 优点

  1. 操作简单(滚动鼠标)
  2. 节省空间
  3. 用户体验好

3. 缺点

  1. 无限滚动加载模式,页脚就永远加载不出来了。

4.代码实现

4.1 第一步 创建模板

首先你的想好,你想要创建几列,然后在body中创建好模板

<div id="box">
    <ul></ul>
    <ul></ul>
    <ul></ul>
    <ul></ul>
</div>

4.2 第二步 设置css样式

设置写简单的样式,让每个图片之间有点间隙,通俗易懂点就是,让照片更有视觉冲击力,比较有美感。

*{
        padding: 0;
        margin: 0;
}
#box{
        width: 90%;
        margin: 20px auto;
}
#box ul{
        list-style: none;
        float: left;
        width: 24%;
        margin: 5px;
}
#box ul img{
        width: 100%;
        margin: 5px;
}
4.3 第三步 添加图片

现在就是利用js原生循环创建图片和li。

function createImg (count) {
     //循环创建
    for(var i = 0; i < count; i++) {
        //创建图片 和 li
        var img = document.createElement("img");
        img.src = "美女/" + i + ".jpg";
        var li = document.createElement("li");
        li.appendChild(img);
     }
}
//调用函数
createImg(99);
4.4 第四步 怎么把图片添加到ul中

这时候就要想想怎么把图片添加到ul,因为这时候图片大小不一样,如果你依次循环添加到ul中,可能会出现长的图片都在一列,短的都在一列,可能会使中间出现一个大的缺口,那么就会很缺少美感。


原创.jpg


所以,我们就可以,每次都找到它的最短的那一列,然后添加到它的后面,不管是谁,只要在添加图片的时候,只要你短,我就在你后面添加的道理。就能有效的避免刚才那种情况的发生了,吼吼,看代码吧......

//获取到所有的ul
var ulArr = document.querySelectorAll("ul");
//假设一个最短的ul
var minHeightUl = ulArr[0];
//循环找到每次最短的然后添加图片
for (var j = 0; j < ulArr.length; j++) {
    if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
        minHeightUl = ulArr[j];
    }
}
minHeightUl.appendChild(li);
4.5 第五步 完成瀑布流之各种型号美女

图片不能太大,要不然上传不了,这就尴尬了......


瀑布流之各种型号美女.gif

5. 完整代码

就知道有些人按捺不住,我懂你,把完整代码都给你好了吧!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            width: 90%;
            margin: 20px auto;
        }
        #box ul{
            list-style: none;
            float: left;
            width: 24%;
            margin: 5px;
        }
        #box ul img{
            width: 100%;
            margin: 5px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <script type="text/javascript">
        var ulArr = document.querySelectorAll("ul");
        function createImg (count) {
            for(var i = 0; i < count; i++) {
                //创建图片 和 li
                var img = document.createElement("img");
                img.src = "美女/" + i + ".jpg";
                var li = document.createElement("li");
                li.appendChild(img);
                //假设一个最短的ul
                var minHeightUl = ulArr[0];
                for (var j = 0; j < ulArr.length; j++) {
                    if (minHeightUl.offsetHeight > ulArr[j].offsetHeight) {
                        minHeightUl = ulArr[j];
                    }
                }
                minHeightUl.appendChild(li);
            }
        }
        createImg(99);
    </script>
</body>
</html>

6. 结束语

看完我写的js瀑布流之各种型号美女,有没有感觉你在喷血啊,哈哈,最后,求点赞,求分享,求打赏!!!!!!


求点赞.gif
评论