10分钟学会前端JS瀑布流

最新推荐文章于 2023-10-29 18:58:29 发布

胖达爱打代码

最新推荐文章于 2023-10-29 18:58:29 发布

阅读量255

点赞数

分类专栏：实战项目文章标签： javascript chrome 前端 css3 es6

本文链接：https://blog.csdn.net/weixin_47724586/article/details/108027412

版权

实战项目专栏收录该内容

14 篇文章 0 订阅

订阅专栏

10分钟学会前端JS瀑布流

一.今天我们将以原生js的方式来解释瀑布流构造和运行原理，帮助大家更好的理解，其中涉及到ajax和延迟加载等，如果有同学没有学过可以看我之前发过的相关文章:
快速上手延迟加载
如有不完善之处可多多指正，另外想要其完整项目可在评论区留邮箱，或私信联系我。
实现效果如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200815210002738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzcyNDU4Ng==,size_16,color_FFFFFF,t_70#pic_center
低网络配置下，清晰可见延迟加载和瀑布流的实现，那么我们下面开始着手搭建结构吧。首先demo由一个html 两个js文件以及图片库和json文件组成。

----------html部分，由于css较少，我们直接写在了html上方

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .container {
            width: 840px;
            margin: 20px auto;
            background: #f4f4f4;
            overflow: hidden;
        }
        .container ul {
            float: left;
            width: 19%;
            margin: 0 0.5%;
            list-style: none; 
        }
        .container ul li {
            margin-top: 10px;
            width: 100%;
            height: 100%;
        }
        .container ul li img {
            width: 100%;
            height: 200px;
            background: url('images/timg.gif') no-repeat center;
            background-size:60px 60px;
        }
        .container ul li p {
            color: orangered;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="container" class="container">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <script src="./utils.js"></script>
    <script src="./index.js"></script>
</body>

</html>

----------json部分

[
  {"src": "./img/1.jpg","title":"人生不止有代码 诗和远方","height": "200px"},
  {"src": "./img/2.jpg","title":"人生不止有代码 诗和远方","height": "220px"},
  {"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "250px"},
  {"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "300px"},
  {"src": "./img/5.jpg","title":"人生不止有代码 诗和远方","height": "170px"},
  {"src": "./img/6.jpg","title":"人生不止有代码 诗和远方","height": "280px"},
  {"src": "./img/7.jpg","title":"人生不止有代码 诗和远方","height": "160px"},
  {"src": "./img/8.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
  {"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
  {"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "230px"}
]

----------js文件，utils部分，里面由封装好的方法，可直接粘贴使用

// An highlighted block
let utils = (function () {
    function offset(curEle) {
        let l = curEle.offsetLeft;
        let t = curEle.offsetTop;
        let parent = curEle.offsetParent;

        while (parent !== document.body) {
            l += parent.clientLeft + parent.offsetLeft;
            t += parent.clientTop + parent.offsetTop;
            parent = parent.offsetParent;
        }
        return {
            left: l,
            top: t
        }
    }

    function getCss(curEle, attr) {
        let val = null;
        if ('getComputedStyle' in window) {
            val = getComputedStyle(curEle)[attr];
        } else {
            val = curEle.currentStyle[attr];
        }
        let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize|opacity)$/;
        if (reg.test(attr)) {
            val = parseFloat(val);
        }
        return val;
    }

    function setCss(curEle, attr, value) {

        let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize)$/;
        if (reg.test(attr)) {
            if (typeof value === 'number') {
                value = value + 'px';
            }
        }
        curEle.style[attr] = value;
    }

    function setGroupCss(curEle, obj) {
        // 对象有几个键值对就调用几次setCss方法，
        for (var key in obj) {
            setCss(curEle, key, obj[key])
        }
    }
    function css(){
        let [curEle,attr,value] = arguments;
        // 如果传参的个数是2，那就说明不是获取样式就是批量设置样式
        if(arguments.length === 2){
            // 如果第二个参的数据类型是字符串，那就是获取样式
            if(typeof attr === 'string'){
                return getCss(curEle,attr)
            }
            else {
                setGroupCss(curEle,attr)
            }
        }
        // 如果传递的参数是3个，那就是单个设置样式
        else if(arguments.length === 3){
            setCss(curEle,attr,value)
        }

    }
    function win(attr,value){
        if(value === undefined){
          return  document.documentElement[attr] || document.body[attr]
        }
        document.documentElement[attr] = value;
        document.body[attr] = value;
   }
   function toArray(likeAry){
        let ary = [];
        try{
            ary = Array.prototype.slice.call(likeAry);
        }catch(e){
            for (var i = 0; i < likeAry.length; i++) {
               ary.push(likeAry[i])
            }
        }
        return ary
   }
    return {
        offset,
        getCss,
        setCss,
        setGroupCss,
        css,
        win,
        toArray
    }
})()

js部分index.js(核心部分)
1.首先创建一个自执行函数，接着时是AJAX的老四样，
在这里插入图片描述
2.等ajax执行完我们进行数据渲染:

定义uls接收html的五组ul，这个uls是一个类数组，为了接下来这个类数组能够调用数组的方法，我们需要将类数组转换成真正的数组.然后我们需要创建渲染的函数，用于将瀑布流效果初步实现。
在这里插入图片描述
3.延迟加载部分

口才不精深感歉意，有问题可以在评论区交流，如果有大家觉得学到了一些，麻烦您点个关注，这对我真的非常重要!!! 感谢各位！

胖达爱打代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10分钟学会前端JS瀑布流

10分钟学会JS瀑布流一.瀑布流是前端开发必会的技能之一，某度图片，花某网都有运用，今天我们将以原生js的方式来解释其构造和运行原理，帮助大家更好的理解，如有不完善之处可多多指正，另外想要其完整项目可在评论区留邮箱，或私信联系我。...
复制链接

扫一扫