js实现瀑布流布局

news2025/1/21 16:40:47

jquery.masonry.min.js：https://download.csdn.net/download/weixin_45791806/88224671
jQeasing.js：
https://download.csdn.net/download/weixin_45791806/88224673
jquery.lazyload.js这个js可以自己百度下载
直通车：https://download.csdn.net/download/weixin_45791806/88224674

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="style/index.css">
    <script src="js/jquery-1.8.3.min.js"></script>
</head>

<body>
    <div class="content">
        <!-- 瀑布流样式开始 -->
        <div class="waterfull clearfloat" id="waterfull">
            <ul class="index-ul">
                <li class="item">
                    <a href="#" class="a-img" title="手把手教你用css3来创建loading动画(二)">
                        <img data-original="http://wlog.cn/demo/waterfall/images/003.jpg" src="" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://" title="手把手教你用css3来创建loading动画(二)">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img data-original="http://wlog.cn/demo/waterfall/images/011.jpg" src="" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img data-original="http://wlog.cn/demo/waterfall/images/002.jpg" src="" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img data-original="http://wlog.cn/demo/waterfall/images/003.jpg" src="" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img src="http://wlog.cn/demo/waterfall/images/003.jpg" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img src="http://wlog.cn/demo/waterfall/images/002.jpg" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img src="http://wlog.cn/demo/waterfall/images/003.jpg" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img src="http://wlog.cn/demo/waterfall/images/003.jpg" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img src="http://wlog.cn/demo/waterfall/images/002.jpg" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img src="http://wlog.cn/demo/waterfall/images/011.jpg" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>

            </ul>
        </div>
        <!-- loading按钮自己通过样式调整 -->
        <div id="imloading"
            style="width:150px;height:30px;line-height:30px;font-size:16px;text-align:center;border-radius:3px;opacity:0.7;background:#000;margin:10px auto 30px;color:#fff;display:none">
            加载中.....
        </div>
    </div>

</body>
<!--这个插件是瀑布流主插件函数必须-->
<script src="js/jquery.masonry.min.js"></script>
<script defer src="js/jQeasing.js"></script>
<script defer src="js/jquery.lazyload.js"></script>
<script defer src="js/index.js"></script>


</html>

index.css

*{
    padding: 0;
}
ul,a{
    list-style: none;
    text-decoration: none;
}
.content{
	max-width: 1280px;
	margin: 0 auto;
    margin-top: 15px;
}
.waterfull{
	margin: 0 auto;
}
.waterfull ul{
    margin: 0 auto;
}
.waterfull ul li{
	float: left;
	width: 200px;
	padding: 8px;
	margin: 0 6px 10px;
	background: #fff;
	border-radius: 3px;
	position: relative;
	overflow: hidden;
}
.waterfull ul li .a-img{
	width: 100%;
    overflow: hidden;
	display: block;
	position: relative;
}
.waterfull ul li .a-img img{
	width: 100%;
	display: block;
    border-radius: 16px;
}
.waterfull ul li .li-title{
    margin: 5px 0;
	overflow: hidden;
}
.waterfull ul li .li-title a{
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

.author-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
    color: var(--color-secondary-label);
    font-size: 12px;
    transition: color 1s;
}
.author-wrapper .author{
    display: flex;
    align-items: center;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 12px;
}
.author-wrapper .author-avatar{
    margin-right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
}
.author-wrapper .name{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
}

index.js

const Waterfall = {
    container: $('.waterfull ul'), // 瀑布流容器
    loading: $('#imloading'), // loading元素
    page: 1, // 当前页数
    init() {
        this.loading.data("on", true); // 初始化loading状态
        this.tores(); // 设置瀑布流容器的宽度
        $(window).resize(() => this.tores()); // 监听窗口大小变化，动态调整瀑布流容器的宽度
        this.initMasonry(); // 初始化瀑布流布局
        this.lazyLoadImages(); // 懒加载图片
        // this.bindScrollEvent(); // 绑定滚动事件
    },
    
    // 判断瀑布流最大布局宽度，最大为1280
    tores() {
        let tmpWid = $(window).width();
        if (tmpWid > 1280 || tmpWid === 1280) {
            tmpWid = 1200;
        } else {
            const column = Math.floor(tmpWid / 100);
            tmpWid = column * 100;
        }
        $('.waterfull').width(tmpWid); // 设置瀑布流容器的宽度
    },

    initMasonry() {
        this.container.imagesLoaded(() => {
            this.container.masonry({
                columnWidth: 0, // 每一列的宽度，0表示不设置固定宽度，自动适应
                itemSelector: '.item', // 子元素的选择器，用于指定要布局的元素
                isFitWidth: true, // 是否自适应容器的宽度
                isAnimated: true, // 是否启用动画效果
                isRTL: false, // 是否从右到左布局
                isResizable: true, // 是否允许调整布局大小
                animationOptions: {
                    duration: 800, // 动画的持续时间，单位为毫秒
                    easing: 'easeInOutBack', // 动画的缓动函数
                    queue: false // 是否使用队列来管理动画
                }
            });
        });
    },

    lazyLoadImages() {
        $("img").lazyload({
            failure_limit: 2,
            threshold: 10,
            effect: "fadeIn",
            skip_invisible: true
        });
    },

    bindScrollEvent() {
        $(window).on('scroll', () => {
            if (!this.loading.data("on")) return; // 如果loading状态为关闭，则不执行下拉加载

            const windowHeight = $(window).height(); // 窗口高度
            const scrollTop = $(window).scrollTop(); // 滚动条距离顶部的高度
            const documentHeight = $(document).height(); // 文档高度

            // 当滚动到底部时触发加载更多
            if (scrollTop + windowHeight >= documentHeight) {
                this.loadMore();
            }
        });
    },

    loadMore() {
        // 关闭loading状态，避免重复加载
        this.loading.data("on", false); 
        // 发起异步请求获取更多数据
        $.ajax({
            url: 'your_api_url', // 替换为实际的接口地址
            type: 'GET',
            data: {
                page: this.page + 1 // 请求下一页的数据
            },
            success: (response) => {
                // 处理返回的数据，将新的数据添加到瀑布流容器中
                const newItems = response.items;
                this.container.append(newItems);

                // 更新瀑布流布局
                this.container.imagesLoaded(() => {
                    this.container.masonry('appended', newItems);
                });

                // 更新页数
                this.page++;

                // 打开loading状态，准备下次加载
                this.loading.data("on", true);
            },
            error: (error) => {
                console.error('Failed to load more data:', error);
                // 发生错误时，打开loading状态，以便重新加载
                this.loading.data("on", true);
            }
        });
    }
};

// 初始化瀑布流
Waterfall.init();

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/895368.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【JAVA】我们该如何规避代码中可能出现的错误？（一）

【JAVA】我们该如何规避代码中可能出现的错误？（一）

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 文章目录 前言三种类型的异常异常处理JAVA内置异常类Exception 类的层次 前言 异常是程序中的一些错误&#xff0c;但并不是所有的错误都是异常&#xff0c;并且错误有时候是可以避免的&…
阅读更多...
设计模式之中介者模式（Mediator）的C++实现

设计模式之中介者模式（Mediator）的C++实现

1、中介者模式的提出 在软件组件开发过程中&#xff0c;如果存在多个对象&#xff0c;且这些对象之间存在的相互交互的情况不是一一对应的情况&#xff0c;这种功能组件间的对象引用关系比较复杂&#xff0c;耦合度较高。如果有一些新的需求变化&#xff0c;则不易扩展。中介者…
阅读更多...
好用的语音转文字免费app手机软件分享给你

好用的语音转文字免费app手机软件分享给你

嘿&#xff01;你有没有遇到过这样的情况&#xff1a;听到了一段精彩的演讲、访谈&#xff0c;但又不方便记录下来&#xff1f;或者&#xff0c;你是一个繁忙的职场人士&#xff0c;需要快速将会议内容转化为文字记录,又苦于手动转写花费时间太多&#xff1f;别担心&#xff0c…
阅读更多...
使用Alien对.deb包与.rpm包相互转换

使用Alien对.deb包与.rpm包相互转换

目录 1、切换到root 2、更新yum&#xff08;更新比较耗时&#xff0c;不更新没试行不&#xff0c;自行斟酌是否跳过这一步&#xff09; 3、卸载ibus 4、安装Alien及其依赖包 5、安装Alien 6、将.deb转换成.rpm包 7、安装RPM包 8、如果报错 9、将.rpm转换成.deb包 10、安…
阅读更多...
白嫖怪小案例———用爬虫实现csdn免费下载资源搜寻

白嫖怪小案例———用爬虫实现csdn免费下载资源搜寻

前言 众所周知&#xff0c;在csdn下载资源有很多都是要收费的&#xff0c;最常见的是要积分的 但是小编囊中羞涩&#xff0c;买不起VIP&#xff0c;也没有积分&#xff0c;而资源又要一个一个点进去才知道是不是免费的&#xff08;最爱0积分了&#xff0c;老白嫖怪了&#xff…
阅读更多...
Egg.js构建一个stream流式接口服务

Egg.js构建一个stream流式接口服务

经常需要用到 stream 流式接口服务,比如&#xff1a;大文件下载、日志实时输出等等。本文将介绍如何使用Egg.js构建一个 stream 流式接口服务。 一、准备工作 目录结构&#xff1a; app//controllerindex.jstest.txttest.shindex.js 控制器test.txt 测试文件&#xff0c;最好…
阅读更多...
vue3 injection报错 injection“xxx“ not found.

vue3 injection报错 injection“xxx“ not found.

在封装CheckboxGroup组件的的时候&#xff0c;需要通过provide&#xff0c;代码如下&#xff1a; //父组件 <template><div class"envCheckBoxGroup"><slot></slot></div> </template> <script setup> import { provide …
阅读更多...
【云原生】3分钟快速在Kubernetes部署Prometheus2.42+Grafana9.5.1+Alertmanager0.25

【云原生】3分钟快速在Kubernetes部署Prometheus2.42+Grafana9.5.1+Alertmanager0.25

文章目录 1、简介2、GitHub地址3、环境信息4、安装5、访问Grafana1、简介 Prometheus-operator帮助我们快速创建Prometheus+Grafana+Alertmanager等服务，而kube-prometheus更加完整的帮助我们搭建全套监控体系，这包括部署多个 Prometheus 和 Alertmanager 实例， 指标导出器…
阅读更多...
Spring系列篇--关于Spring Bean完整的生命周期【附有流程图，超级易懂】

Spring系列篇--关于Spring Bean完整的生命周期【附有流程图，超级易懂】

&#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 接下来看看由辉辉所写的关于Spring的相关操作吧 目录 &#x1f973;&#x1f973;Welcome Huihuis Code World ! !&#x1f973;&#x1f973; 一.Spring Bean是单例模式还是多例模式 二…
阅读更多...
【脚踢数据结构】查找

【脚踢数据结构】查找

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;软件配置等领域博主&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff01;送给自己和读者的…
阅读更多...
代码随想录—力扣算法题：707设计链表.Java版（示例代码与导图详解）

代码随想录—力扣算法题：707设计链表.Java版（示例代码与导图详解）

版本说明 当前版本号[20230818]。 版本修改说明20230818初版 目录 文章目录 版本说明目录707.设计链表思路获取链表第index个节点的数值在链表的最前面插入一个节点在链表的最后面插入一个节点在链表第index个节点前面插入一个节点删除链表的第index个节点 单链表角度总结 7…
阅读更多...
STM32入门——IIC通讯

STM32入门——IIC通讯

江科大STM32学习记录 I2C通信 I2C&#xff08;Inter IC Bus&#xff09;是由Philips公司开发的一种通用数据总线两根通信线&#xff1a;SCL&#xff08;Serial Clock&#xff09;、SDA&#xff08;Serial Data&#xff09;同步&#xff0c;半双工带数据应答支持总线挂载多设备…
阅读更多...
Python“牵手”lazada商品评论数据采集方法，lazadaAPI申请指南

Python“牵手”lazada商品评论数据采集方法，lazadaAPI申请指南

lazada平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c;lazadaAPI接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问lazada平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现la…
阅读更多...
程序人生：进不了大厂的测试员，究竟还有没有出路了？

程序人生：进不了大厂的测试员，究竟还有没有出路了？

金九银十的到来&#xff0c;使得许多职场人按耐不住&#xff0c;纷纷开始找寻合适的工作机会。猎头和HR们摩拳擦掌&#xff0c;争取在这两个月给今年多加点业绩。 对许多互联网人来说&#xff0c;跳槽意味着加薪&#xff0c;而对于程序员而言&#xff0c;是否能跳槽进大厂是他…
阅读更多...
前端---需要了解浏览器相关知识--浏览器请求服务器资源---缓存

前端---需要了解浏览器相关知识--浏览器请求服务器资源---缓存

知识点1: 掘金1&#xff1a;浏览器缓存 掘金2 :浏览器缓存 一、浏览器缓存 请求&#xff08;静态资源 &#xff5c; 动态资源&#xff09; 一、缓存是什么&#xff1f; 如果没有缓存的机制 每次都要重新请求静态资源 1.从网络上的下载时间&#xff0c;肯定大于从硬盘里读的…
阅读更多...
《树莓派4B家庭服务器搭建指南》第二十期：在树莓派运行rsnapshot, 实现对服务器数据低成本增量本地备份

《树莓派4B家庭服务器搭建指南》第二十期：在树莓派运行rsnapshot, 实现对服务器数据低成本增量本地备份

title: 020《树莓派4B家庭服务器搭建指南》第二十期&#xff1a;在树莓派运行rsnapshot, 实现对服务器数据低成本增量本地备份 我的天翼云服务器有/opt 和 /usr/share/nginx两个目录, 用来存储网站的内容, 数据无价, 为了避免珍贵的数据丢失&#xff0c;我决定使用树莓派运行 …
阅读更多...
TikTok或将于8月底关闭半闭环、速卖通或将推出“半托管”模式

TikTok或将于8月底关闭半闭环、速卖通或将推出“半托管”模式

《出海周报》是运营坛为外贸企业主和外贸人独家打造的重要资讯栏目&#xff0c;聚焦企业出海、海外市场动态、海外监管政策等方面&#xff0c;以简捷的方式&#xff0c;提升读者获取资讯的效率。 接下来运营坛为大家带来第15期出海周报&#xff0c;快来看看这周国内外市场发生了…
阅读更多...
【经验】VScode远程连接Ubuntu出错的解决办法（2023年，完整的排查思路）

【经验】VScode远程连接Ubuntu出错的解决办法（2023年，完整的排查思路）

用VScode常常会碰到以下情况&#xff0c;Could not establish connection。 先介绍一下VScode远程连接和终端SSH连接的区别&#xff1a;终端直接用SSH连接时&#xff0c;只需要开启SSH服务&#xff0c;并消耗少量的内存即可&#xff1b;VScode连接时&#xff0c;会自动在服务器…
阅读更多...
HCIP实验之MPLS

HCIP实验之MPLS

目录 一&#xff0c;实验题目 ​编辑 拓扑与IP地址规划如图所示 二&#xff0c;实验思路 三&#xff0c;实验步骤 3.1 私网部分IP地址配置 3.2 LSP部分配置 3.3 启动OSPF协议 3.4 启动MPLS协议 3.5 启动MPLS VPN 3.6 实现公网私网互通 3.7 配置BGP 3.8 双向重发布 …
阅读更多...
Python软件外包开发框架

Python软件外包开发框架

Python有许多流行的开发框架&#xff0c;用于不同类型的应用开发&#xff0c;包括Web应用、数据科学、人工智能等。以下分享一些常见的Python开发框架及其特点&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023