丶阿喜z

实现瀑布流布局效果两种方式

使用原生JavaScript实现瀑布流

// index.html


<html>
<head>
    <title>瀑布流布局title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/script.js">script>
head>
<body>
    <div id="main">
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/0.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/1.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/2.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/3.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/4.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/5.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/6.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/7.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/8.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/9.jpg" />
            div>
        div>
        <div class="box">
            <div class="pic">
                <img src="images/10.jpg" />
            div>
        div>
    div>
body>
html>

// script.js

window.onload = function(){
    waterfall("main","box");
    var dataInt = {"data":[{"src":"92.jpg"},{"src":"93.jpg"},{"src":"94.jpg"},{"src":"95.jpg"}]}
    window.onscroll = function(){
        if(checkScrollSlide()){
            var oParent = document.getElementById("main");
            // 将数据块渲染后当前页面的尾部
            for(var i = 0; i < dataInt.data.length; i++){
                var oBox = document.createElement("div");
                oBox.className = "box";
                oParent.appendChild(oBox);
                var oPic = document.createElement("div");
                oPic.className = "pic";
                oBox.appendChild(oPic);
                var oImg = document.createElement("img");
                oImg.src = "images/" + dataInt.data[i].src;
                oPic.appendChild(oImg);
            }
            waterfall("main","box");
        }
    }
}

function waterfall(parent,box){
    // 将main下的所有class为box的元素取出来
    var oParent = document.getElementById(parent);
    var oBoxes = getByClass(oParent,box);
    // 计算整个页面显示的列数（页面宽/box的宽）
    var oBoxWidth = oBoxes[0].offsetWidth; // 等宽不等高
    var cols = Math.floor(document.documentElement.clientWidth/oBoxWidth);
    // 设置main的宽度
    oParent.style.cssText = "width:" + oBoxWidth * cols + "px;margin:0 auto;";
    // 存放第一列高度的数组
    var heightArr = [];
    for(var i = 0; i < oBoxes.length; i++){
        if(i < cols){
            heightArr.push(oBoxes[i].offsetHeight);
        }else{
            var minHeight = Math.min.apply(null,heightArr);
            var index = getMinHeightIndex(heightArr,minHeight); // 获取最小高度的索引
            oBoxes[i].style.position = "absolute";
            oBoxes[i].style.top = minHeight + "px";
            oBoxes[i].style.left = oBoxWidth * index + "px";
            heightArr[index] = minHeight + oBoxes[i].offsetHeight;  // 改变当前列的高度
        }
    }
}

// 根据class获取元素
function getByClass(parent,className){
    var boxArr = new Array(), // 用来存储获取到的所有class为box的元素
        oElements = parent.getElementsByTagName("*");

    for(var i = 0; i < oElements.length; i++){
        if(oElements[i].className == className){
            boxArr.push(oElements[i]);
        }
    }

    return boxArr;
}

// 获取最小高度的下标
function getMinHeightIndex(arr,value){
    for(var i in arr){
        if(arr[i] == value){
            return i;
        }
    }
}

// 检测是否具备了滚条加载数据块的条件
function checkScrollSlide(){
    var oParent = document.getElementById("main");
    var oBoxes = getByClass(oParent,"box");
    var lastBoxHeight = oBoxes[oBoxes.length - 1].offsetTop + Math.floor(oBoxes[oBoxes.length - 1].offsetHeight / 2);
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
    var height = document.body.clientWidth || document.documentElement.clientHeight;

    return (lastBoxHeight < scrollTop + height) ? true : false;
}

// style.css

*{margin: 0; padding: 0;}

#main{position: relative;}

.box{padding: 15px 0 0 15px;
     float: left;}

.pic{padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0 0 5px #ccc;}

.pic img{width:165px;
         height: auto;}

使用JQuery实现瀑布流 ##（注意导入jquery.js）

// index.html


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"/>script>
<script type="text/javascript" src="js/waterfall.js"/>script>

<title>title>
<style type="text/css">
    *{padding: 0;margin:0;}
    #main{
        position: relative;
    }
    .box{
        padding: 15px 0 0 15px;
        float:left;
    }
    .pic{
        padding: 10px;
        border:1px solid #ccc;
        box-shadow: 0 0 6px #ccc;
        border-radius: 5px;
    }
    .pic img{
        width:162px;
        height:auto;
    }
style>
head>
<body>
<div id="main">
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/3.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/4.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/5.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/6.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/7.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/8.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/9.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/10.jpg"/>
        div>
    div>
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/3.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/4.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/5.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/6.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/7.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/8.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/9.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/10.jpg"/>
        div>
    div>
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/3.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/4.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/5.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/6.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/7.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/8.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/9.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/10.jpg"/>
        div>
    div>
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/3.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/4.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/5.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/6.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/7.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/8.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/9.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/10.jpg"/>
        div>
    div>
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/3.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/4.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/5.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/6.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/7.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/8.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/9.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/10.jpg"/>
        div>
    div>
    <div class="box">
        <div class="pic">
            <img src="./images/1.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/2.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/3.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/4.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/5.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/6.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/7.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/8.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/9.jpg"/>
        div>
    div>
     <div class="box">
        <div class="pic">
            <img src="./images/10.jpg"/>
        div>
    div>
div>
body>
html>

// waterfall.js

$(window).on("load",function(){
    waterfall();
    var dataInt = {"data":[{"src":"92.jpg"},{"src":"93.jpg"},{"src":"94.jpg"},{"src":"95.jpg"}]}
    $(window).on("scroll",function(){
        if(checkScrollSlide()){

            $.each(dataInt.data,function(key,value){
                var oBox = $("").addClass("box").appendTo($("#main"));
                var oPic = $("").addClass("pic").appendTo($(oBox));
                $("").attr("src","images/" + $(value).attr("src")).appendTo($(oPic));
            })
            waterfall();
        }
    })
})

function waterfall(){
    var $boxes = $("#main>div");
    var w = $boxes.eq(0).outerWidth();
    var cols = Math.floor($(window).width() / w);
    $("#main").width(w * cols).css("margin","0 auto");
    var heightArr = [];
    $boxes.each(function(index,value){
        var height = $boxes.eq(index).outerHeight();
        if(index < cols){
            heightArr[index] = height;
        }else{
            var minHeight = Math.min.apply(null,heightArr);
            var minHeightIndex = $.inArray(minHeight,heightArr);
            // 使用$符号把document对象value转换成jquery对象
            $(value).css({
                "position":"absolute",
                "top":minHeight+"px",
                "left":minHeightIndex * w + "px"
            })
            heightArr[minHeightIndex] += $boxes.eq(index).outerHeight();
        }
    })
}

function checkScrollSlide(){
    var $lastBox = $("#main>div").last();
    var lastBoxDis = $lastBox.offset().top + Math.floor($lastBox.outerHeight() / 2); // 距离页面顶部的距离
    var scrollTop = $(window).scrollTop();
    var documentHeight = $(window).height();
    return (lastBoxDis < scrollTop + documentHeight) ? true : false;
}

运行效果如下：

Ubuntu安装LAMP L_h1 测试 ubuntu linux
在安装vim时遇到了一个问题：E:无法获得锁/var/lib/dpkg/lock-frontend-open(11:资源暂时不可用)E:无法获取dpkg前端锁(/var/lib/dpkg/lock-frontend)，是否有其他进程正占用它？解决办法：强制解锁sudorm/var/lib/dpkg/lock-frontendsudorm/var/cache/apt/archives/locksud
【自主探索】frontier_exploration 源码解析玳宸 ROS ROS 源码解析 ros 机器人算法
各文件运行顺序：\exploration_server\launch\exploration.launch\exploration_server\src\plugin_client.cpp\exploration_server\src\exploration_server_node.cpp\exploration_server\src\exploration_server.cpp\frontier
J2EE模式奔走的蚂蚁~ 设计模式 java-ee java
系列文章目录J2EE模式特别关注表示层，这些模式是由SunJavaCenter鉴定的，包括：1、MVC模式（MVCPattern）；2、业务代表模式（BusinessDelegatePattern）；3、组合实体模式（CompositeEntityPattern）；4、数据访问对象模式（DataAccessObjectPattern）；5、前端控制器模式（FrontControllerPatter
J2EE模式---表现层集成模式 hqxstudying java-ee java 开发语言前端 spring
表现层集成模式基础概念表现层集成模式（PresentationIntegrationPatterns）是一组用于解决用户界面与后端系统集成问题的设计模式。这些模式关注如何将不同的应用组件、服务或数据源集成到统一的用户界面中，同时保持界面的可维护性、可扩展性和性能。表现层集成模式在企业级应用、微服务架构和大型Web应用中尤为重要。常见的表现层集成模式1.前端控制器模式（FrontController
设计模式（四）J2EE模式
J2EE模式这些设计模式特别关注表示层。这些模式是由SunJavaCenter鉴定的。包含以下模式：MVC模式（MVCPattern）业务代表模式（BusinessDelegatePattern）组合实体模式（CompositeEntityPattern）数据访问对象模式（DataAccessObjectPattern）前端控制器模式（FrontControllerPattern）拦截过滤器模式（
github上的学习材料三：前端入门资源汇总 X-Prince JS 生活 Git
本篇转载自：https://idoras.com/frontend-resources/前言前端无疑是2016年最火热的技术，没有之一。各种前端mvc框架层出不穷，angularjs，vue，react，前端组件化开发概念已经深入人心。前端工资已经比手机端开发还要高了。作为个人站长，学习下前端设计也是有必要的，一来有些小的设计问题可以自己解决，同时还能提高自己的审美，提高网站的ui设计水平。必备基
技术大牛谈HTML 5设计原理 Bluestar Web开发 html xhtml 浏览器文档 javascript 工作
本篇文章是JeremyKeith在Fronteers2010上的主题演讲，主要跟大家谈谈HTML5的设计。主要分两个方面，一方面就是HTML5；另一方面就是80/20。JeremyKeith在Fronteers2010上的主题演讲下载PPT(PDF)http://adactio.com/extras/slides/designofhtml5.pdf观看视频http://fronteers.nl/c
牛崽姿的ScalerTalk第四轮新概念朗读持续力训练Day59 20181205补作业（20181208）欢_45f4
练习材料：Ourdog,Rex,usedtositoutsideourfrontgateandbark.Everytimehewantedtocomeintothegardenhewouldbarkuntilsomeoneopenedthegate.Astheneighbourscomplainedofthenoise,myhusbandspentweekstraininghimtopresshi
WaveMo: Learning Wavefront Modulations to See Through Scattering CVPR2024
1.研究背景与核心问题散射成像的挑战散射介质（如生物组织、雾、浑浊液体）导致光子路径随机化，传统成像系统仅能捕获噪声斑点（specklepattern），直接成像信噪比趋近于零。经典解决方案（如波前整形、散斑相关法）依赖物理模型迭代优化，需多次测量且鲁棒性差。关键科学问题如何通过单次或极少次光学调制实现对散射介质的穿透成像？核心矛盾：光学调制自由度（10^4级以上）与重建效率的权衡。2.方法论创新
【早安心语】壹典心理咨询
【2021-8-30】早安春夏秋冬Becareful,evenwhenyouarealone,don’tsaybadthingsordobadthings,butlearntobemoreashamedinfrontofyourselfthaninfrontofothers.It’snevertoolatetochange,nomatterhowoldyouareornomatterwhatyou
J2EE模式---前端控制器模式 hqxstudying java-ee 前端状态模式前端控制器模式 java 代码规范设计模式
前端控制器模式基础概念前端控制器模式（FrontControllerPattern）是一种结构型设计模式，其核心思想是将应用程序的所有请求集中到一个中央处理器（前端控制器）进行处理，由它负责接收请求、协调处理流程并返回响应。这种模式简化了应用程序的请求处理机制，减少了代码重复，提高了可维护性，尤其适用于Web应用和GUI系统。前端控制器模式的核心组件前端控制器（FrontController）接收
Java String 正则表达式设计模式包装类 Object类自动拆箱额么么么么 java 正则表达式设计模式
其它API（ApplicationProgramingInterface）应用程序接口（功能）,我们java讲解最常用的一些功能。API作用：API表示的是功能,学习API可以快速进行编程开发。API设计初衷,设计者将复杂的业务逻辑,封装成方法,供调用者更好的使用。对于开发者而言,不需要关注功能的具体逻辑实现,只需要知道如何使用即可。Java提供了很多的包,有一些包需要导入，有一些不需要导入:1.
前端使用 Vue 3，后端使用 Spring Boot 构建 Hello World 程序天天进步2015 编程技巧前端 vue.js spring boot
前端使用Vue3，后端使用SpringBoot构建HelloWorld程序前端（Vue3）首先，创建一个Vue3项目。1.安装VueCLInpminstall-g@vue/cli2.创建Vue项目vuecreatefrontend在交互式提示中，选择默认的Vue3预设。3.修改App.vue在frontend/src目录下，修改App.vue文件：{{message}}{{error}}expor
全球化短剧平台全栈技术架构白皮书：多区域部署、智能分发与沉浸式体验的完整解决方案 ywyy6798 推客系统短剧小程序海外短剧短剧分销海外短剧系统开发短剧系统开发
一、全球化基础架构深度设计全球网络基础设施构建采用多活数据中心部署模式，在北美（弗吉尼亚）、欧洲（法兰克福）、亚太（新加坡）建立三大核心枢纽节点构建混合CDN网络，整合AWSCloudFront、Akamai、Fastly等主流CDN服务商，同时接入当地优质运营商CDN部署边缘计算节点网络，在全球200+边缘位置部署轻量级计算单元，实现用户请求的就近处理建立智能流量调度系统，基于实时网络状况监测数
自学java到什么程度才能就业？ Python编程社区
多年Java开发从业者：首先，这个问题主要问：自学Java编程技术，如果才能找到一份Java编程的工作。按照现在的招聘标准来看，无论你去哪个公司面试，你只需要满足他们公司的需求就可以。找到一份Java编程工作需要掌握的内容如下：首先是Javase作为Java最基本的学习内容，不在多说。然后是掌握JavaScript的基本原理，因为做Java编程开发必须学会JavaScript，用到JavaScri
【译】2018 前端性能优化清单 —— 第一部分 qq_36320160 前端前端
原文地址：Front-EndPerformanceChecklist2018-Part1原文作者：VitalyFriedman译文出自：掘金翻译计划本文永久链接：https://github.com/xitu/gold-miner/blob/master/TODO/front-end-performance-checklist-2018-1.md译者：tvChan校对者：mysterytonyry
Ubuntu下中文输入法安装超喜欢下雨天日常 ubuntu linux 运维
在Ubuntu22.04系统中安装中文输入法，通常推荐使用Fcitx5，这是一个功能强大的输入法平台。以下是安装和配置中文输入法的步骤：1.安装Fcitx5：打开终端，输入以下命令来安装Fcitx5及其中文输入插件和前端界面：sudoaptinstall-yfcitx5\fcitx5-chinese-addons\fcitx5-frontend-gtk3\fcitx5-frontend-gtk2\
ER综述论文阅读-Emotion recognition in EEG signals using deep learning methods: A review 今天早睡了情绪识别Emotion Recognition 论文阅读深度学习人工智能
EmotionrecognitioninEEGsignalsusingdeeplearningmethods:AreviewQ1期刊，2023论文链接：https://d1wqtxts1xzle7.cloudfront.net/105887899/emotionreview-libre.pdf?1695460941=&response-content-disposition=inline%3B+f
前端每周清单第 42 期：V8 的执行流与优化，Pinterest 的 PWA 实践 weixin_34146410 前端 rust 区块链 ViewUI
前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为新闻热点，开发教程，工程实践，深度阅读，开源项目，巅峰人生等栏目。欢迎关注【前端之巅】微信公众号（ID：frontshow），及时获取前端每周清单。新闻热点国内国外，前端最新动态Rust默认可以编译为WebAssembly:随着PullRequest46115:"rustbuild:EnableWebAssemb
ECR仓库CloudFormation模板完整指南 ivwdcwso 运维与云原生自动化 aws 运维 ECR CloudFormation 镜像容器
概述本文档详细介绍了一个通用的AmazonECR（ElasticContainerRegistry）仓库CloudFormation模板，该模板支持多业务组、参数化配置，并包含完整的安全策略、生命周期管理和监控功能。模板特性核心功能✅支持4个业务组：app、ai、mall、frontend✅灵活的服务名手动输入✅多环境支持（dev/test/staging/prod）✅自动镜像扫描和安全检查✅生命
文献略读：Frontier-Based 相关 Roche1imit 无人机规划探索相关论文笔记人工智能自动驾驶
文献略读：FrontierBased相关AFrontier-BasedApproachforAutonomousExploration该论文第一次提出了frontier-based方法frontier：已知空间和未探索空间的分解区域核心思想：Togainthemostnewinformationabouttheworld,movetotheboundarybetweenopenspaceandun
ShaderGraph节点解析(146):面朝向判断节点（Is Front Face Node）详解
目录一、前言二、节点基础2.1功能概述2.2端口详解2.3底层实现三、工作原理3.1面朝向定义3.2法线与面朝向的关系3.3与背面剔除的区别四、应用场景4.1双面材质差异化渲染场景：正面显示纹理，背面显示纯色或另一种纹理4.2背面发光效果场景：物体背面显示自发光，创造边缘光或轮廓效果4.3翻转动画场景：当物体旋转导致正面变为背面时，显示过渡效果（如透明度变化）4.4碰撞检测可视化场景：在碰撞检测中
C++STL-vector s15335 C++STL c++开发语言
一.基本概念1.front()就是容器里第一个元素，back()就是容器最后一个元素，begin()就是指向第一个元素，end()就是指向最后一个元素的后一个元素2.vector对象创建1.默认构造函数vectorv1;2.初始化列表vectorv2_1={9,8,7,6,5};vectorv2_2({9,6,6,8,5});3.迭代器vectorv3(v2_1.begin(),v2_1.end(
AI 的出现，是否能替代 IT 从业者？敲代码的苦13 人工智能
在科技浪潮奔涌向前的时代，AI正以惊人的速度渗透进各个领域，IT行业首当其冲。当AI编写代码的效率不断提升，当智能算法能够快速完成系统故障诊断，当自动化工具可以处理大量数据运维工作，IT从业者们不禁心生疑虑：AI真的会成为“职业终结者”，将自己从岗位上彻底替代吗？这场关于AI与IT从业者未来的讨论，充满了争议与悬念，也关乎着无数人的职业命运。一、AI在IT领域的应用现状编程开发中的AIAI在编程开
零基础 Qt 6 在线安装教程程序员乐逍遥 Qt框架 MFC框架高级编程 qt 开发语言 qt6 C++安装
1.首先给你们Qt5.14.2的安装地址,有需要的可以安装Indexof/archive/qt/5.14/5.14.22.首先下载Qt6的在线安装包https://d13lb3tujbc8s0.cloudfront.net/onlineinstallers/qt-online-installer-windows-x64-4.10.0.exe3.安装运行程序
华为机试-入门（Python）
牛客/华为机试/题库/在线编程开发技巧：反向思维、先易后难、先死后活puthon开发文档教程-语法特性/库参考-标准库与内置对象/语言参考-内置函数提示：满足题目输入输出条件，input()中不必有提示语，否则在线编辑器会将提示语算作实际输出，导致结果错误。入门HJ7取近似值题目描述写出一个程序，接受一个正浮点数值，输出该数值的近似整数值。如果小数点后数值大于等于0.5,向上取整；小于0.5，则向
利用systemd启动部署在服务器上的web应用不是吧这都有重名遇到的问题服务器前端运维
0.背景系统环境：Ubuntu22.04web应用情况：前后端分类，前端采用react，后端采用fastapi1.具体配置1.1前端配置开发态运行（启动命令是npmrundev）,创建systemd服务文件sudonano/etc/systemd/system/frontend.service内容如下：[Unit]Description=ReactFrontendDevServerAfter=ne
Linux内核IPv4路由子系统深度剖析：FIB前端实现与设计原理 109702008 编程 #C语言网络 linux 网络人工智能
深入理解Linux网络栈的核心组件：路由表管理、地址验证与事件处理机制引言在Linux网络栈中，IPv4转发信息库（FIB）是决定数据包传输路径的核心子系统。fib_frontend.c作为FIB的前端实现，承担着路由表管理、用户接口交互和网络事件响应等关键任务。本文将深入剖析这一关键文件的实现原理，揭示Linux路由机制的设计哲学。一、FIB前端整体架构/*核心数据结构*/structfib_t
（慎点/1w字+警告/刚入坑必看请自带水杯）后端入门玩家的第一个项目保姆级笔记包教包会她是我的青春项目学习 java maven intellij-idea
目前学习了项目的后端功能开发，针对前段时间的学习进行系统总结提升，根据项目开发流程总结1.资料中所给的前端界面是存放在/backend和/front之中，而springboot自带的是static，故需要做一层映射才可以访问到publicclasswebMvcConfigextendsWebMvcConfigurationSupport{@OverrideprotectedvoidaddResou
Ollama-python：调用大模型服务实现代码自动补全，提升编程开发效率！
Ollama是一个优秀的本地部署与管理大模型的框架。通过Ollama，我们可以在本地部署、定制自己的大模型服务。大模型部署在本地后，我们可以有哪些应用呢？本文介绍如何通过Ollama的pythonsdk，调用本地部署的大模型服务，对我们的代码进行自动补全，提升日常的编程开发效率。安装Ollama及其pythonsdk在https://ollama.com/download下载Ollama安装程序并
312个免费高速HTTP代理IP（能隐藏自己真实IP地址） yangshangchuan 高速免费 superword HTTP代理
124.88.67.20:843 190.36.223.93:8080 117.147.221.38:8123 122.228.92.103:3128 183.247.211.159:8123 124.88.67.35:81 112.18.51.167:8123 218.28.96.39:3128 49.94.160.198:3128 183.20
pull解析和json编码百合不是茶 android pull解析 json
n.json文件: [{name:java,lan:c++,age:17},{name:android,lan:java,age:8}] pull.xml文件 <?xml version="1.0" encoding="utf-8"?> <stu> <name>java
[能源与矿产]石油与地球生态系统 comsci 能源
按照苏联的科学界的说法,石油并非是远古的生物残骸的演变产物,而是一种可以由某些特殊地质结构和物理条件生产出来的东西,也就是说,石油是可以自增长的.... 那么我们做一个猜想: 石油好像是地球的体液,我们地球具有自动产生石油的某种机制,只要我们不过量开采石油,并保护好
类与对象浅谈沐刃青蛟 java 基础
类，字面理解，便是同一种事物的总称，比如人类，是对世界上所有人的一个总称。而对象，便是类的具体化，实例化，是一个具体事物，比如张飞这个人，就是人类的一个对象。但要注意的是：张飞这个人是对象，而不是张飞，张飞只是他这个人的名字，是他的属性而已。而一个类中包含了属性和方法这两兄弟，他们分别用来描述对象的行为和性质（感觉应该是
新站开始被收录后，我们应该做什么？ IT独行者 PHP seo
新站开始被收录后，我们应该做什么？百度终于开始收录自己的网站了，作为站长，你是不是觉得那一刻很有成就感呢，同时，你是不是又很茫然，不知道下一步该做什么了？至少我当初就是这样，在这里和大家一份分享一下新站收录后，我们要做哪些工作。至于如何让百度快速收录自己的网站，可以参考我之前的帖子《新站让百
oracle 连接碰到的问题文强chu oracle
Unable to find a java Virtual Machine－－安装64位版Oracle11gR2后无法启动SQLDeveloper的解决方案作者：草根IT网来源：未知人气：813标签：导读：安装64位版Oracle11gR2后发现启动SQLDeveloper时弹出配置java.exe的路径，找到Oracle自带java.exe后产生的路径“C:\app\用户名\prod
Swing中按ctrl键同时移动鼠标拖动组件（类中多借口共享同一数据）小桔子 java 继承 swing 接口监听
都知道java中类只能单继承，但可以实现多个接口，但我发现实现多个接口之后，多个接口却不能共享同一个数据，应用开发中想实现：当用户按着ctrl键时，可以用鼠标点击拖动组件，比如说文本框。编写一个监听实现KeyListener,NouseListener,MouseMotionListener三个接口，重写方法。定义一个全局变量boolea
linux常用的命令 aichenglong linux 常用命令
1 startx切换到图形化界面 2 man命令:查看帮助信息 man 需要查看的命令,man命令提供了大量的帮助信息,一般可以分成4个部分 name:对命令的简单说明 synopsis:命令的使用格式说明 description:命令的详细说明信息 options:命令的各项说明 3 date:显示时间语法：date [OPTION]... [+FORMAT]
eclipse内存优化 AILIKES java eclipse jvm jdk
一基本说明在JVM中，总体上分2块内存区,默认空余堆内存小于 40%时，JVM就会增大堆直到-Xmx的最大限制；空余堆内存大于70%时，JVM会减少堆直到-Xms的最小限制。 1)堆内存(Heap memory):堆是运行时数据区域，所有类实例和数组的内存均从此处分配,是Java代码可及的内存，是留给开发人
关键字的使用探讨百合不是茶关键字
//关键字的使用探讨/*访问关键词private 只能在本类中访问public 只能在本工程中访问protected 只能在包中和子类中访问默认的只能在包中访问*//*final 类方法变量 final 类不能被继承 final 方法不能被子类覆盖，但可以继承 final 变量只能有一次赋值，赋值后不能改变 final 不能用来修饰构造方法*///this()
JS中定义对象的几种方式 bijian1013 js
1. 基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)： <html> <head> <title>基于已有对象扩充其对象和方法(只适合于临时的生成一个对象)</title> </head> <script> var obj = new Object();
表驱动法实例 bijian1013 java 表驱动法 TDD
获得月的天数是典型的直接访问驱动表方式的实例，下面我们来展示一下： MonthDaysTest.java package com.study.test; import org.junit.Assert; import org.junit.Test; import com.study.MonthDays; public class MonthDaysTest { @T
LInux启停重启常用服务器的脚本 bit1129 linux
启动，停止和重启常用服务器的Bash脚本，对于每个服务器，需要根据实际的安装路径做相应的修改 #! /bin/bash Servers=(Apache2, Nginx, Resin, Tomcat, Couchbase, SVN, ActiveMQ, Mongo); Ops=(Start, Stop, Restart); currentDir=$(pwd); echo
【HBase六】REST操作HBase bit1129 hbase
HBase提供了REST风格的服务方便查看HBase集群的信息，以及执行增删改查操作 1. 启动和停止HBase REST 服务 1.1 启动REST服务前台启动（默认端口号8080） [hadoop@hadoop bin]$ ./hbase rest start 后台启动 hbase-daemon.sh start rest 启动时指定
大话zabbix 3.0设计假设 ronin47
What’s new in Zabbix 2.0? 去年开始使用Zabbix的时候，是1.8.X的版本，今年Zabbix已经跨入了2.0的时代。看了2.0的release notes，和performance相关的有下面几个： :: Performance improvements::Trigger related da
http错误码大全 byalias http协议 javaweb
响应码由三位十进制数字组成，它们出现在由HTTP服务器发送的响应的第一行。响应码分五种类型，由它们的第一位数字表示： 1）1xx：信息，请求收到，继续处理 2）2xx：成功，行为被成功地接受、理解和采纳 3）3xx：重定向，为了完成请求，必须进一步执行的动作 4）4xx：客户端错误，请求包含语法错误或者请求无法实现 5）5xx：服务器错误，服务器不能实现一种明显无效的请求
J2EE设计模式-Intercepting Filter bylijinnan java 设计模式数据结构
Intercepting Filter类似于职责链模式有两种实现其中一种是Filter之间没有联系，全部Filter都存放在FilterChain中，由FilterChain来有序或无序地把把所有Filter调用一遍。没有用到链表这种数据结构。示例如下： package com.ljn.filter.custom; import java.util.ArrayList;
修改jboss端口 chicony jboss
修改jboss端口 %JBOSS_HOME%\server\{服务实例名}\conf\bindingservice.beans\META-INF\bindings-jboss-beans.xml 中找到 <!-- The ports-default bindings are obtained by taking the base bindin
c++ 用类模版实现数组类 CrazyMizzz C++
最近c++学到数组类，写了代码将他实现，基本具有vector类的功能 #include<iostream> #include<string> #include<cassert> using namespace std; template<class T> class Array { public: //构造函数
hadoop dfs.datanode.du.reserved 预留空间配置方法 daizj hadoop 预留空间
对于datanode配置预留空间的方法为：在hdfs-site.xml添加如下配置 <property> <name>dfs.datanode.du.reserved</name> <value>10737418240</value>
mysql远程访问的设置 dcj3sjt126com mysql 防火墙
第一步: 激活网络设置你需要编辑mysql配置文件my.cnf. 通常状况，my.cnf放置于在以下目录： /etc/mysql/my.cnf (Debian linux) /etc/my.cnf （Red Hat Linux/Fedora Linux) /var/db/mysql/my.cnf (FreeBSD) 然后用vi编辑my.cnf，修改内容从以下行： [mysqld] 你所需要: 1
ios 使用特定的popToViewController返回到相应的Controller dcj3sjt126com controller
1、取navigationCtroller中的Controllers NSArray * ctrlArray = self.navigationController.viewControllers; 2、取出后，执行， [self.navigationController popToViewController:[ctrlArray objectAtIndex:0] animated:YES
Linux正则表达式和通配符的区别 eksliang 正则表达式通配符和正则表达式的区别通配符
转载请出自出处：http://eksliang.iteye.com/blog/1976579 首先得明白二者是截然不同的通配符只能用在shell命令中,用来处理字符串的的匹配。判断一个命令是否为bash shell(linux 默认的shell)的内置命令 type -t commad 返回结果含义 file 表示为外部命令 alias 表示该
Ubuntu Mysql Install and CONF gengzg Install
http://www.navicat.com.cn/download/navicat-for-mysql Step1: 下载Navicat ，网址：http://www.navicat.com/en/download/download.html Step2：进入下载目录，解压压缩包：tar -zxvf navicat11_mysql_en.tar.gz
批处理，删除文件bat huqiji windows dos
@echo off ::演示：删除指定路径下指定天数之前（以文件名中包含的日期字符串为准）的文件。 ::如果演示结果无误，把del前面的echo去掉，即可实现真正删除。 ::本例假设文件名中包含的日期字符串（比如：bak-2009-12-25.log） rem 指定待删除文件的存放路径 set SrcDir=C:/Test/BatHome rem 指定天数 set DaysAgo=1
跨浏览器兼容的HTML5视频音频播放器天梯梦 html5
HTML5的video和audio标签是用来在网页中加入视频和音频的标签，在支持html5的浏览器中不需要预先加载Adobe Flash浏览器插件就能轻松快速的播放视频和音频文件。而html5media.js可以在不支持html5的浏览器上使video和audio标签生效。 How to enable <video> and <audio> tags in
Bundle自定义数据传递 hm4123660 android Serializable 自定义数据传递 Bundle Parcelable
我们都知道Bundle可能过put****()方法添加各种基本类型的数据，Intent也可以通过putExtras(Bundle)将数据添加进去，然后通过startActivity()跳到下一下Activity的时候就把数据也传到下一个Activity了。如传递一个字符串到下一个Activity 把数据放到Intent
C＃：异步编程和线程的使用（.NET 4.5 ） powertoolsteam .net 线程 C#异步编程
异步编程和线程处理是并发或并行编程非常重要的功能特征。为了实现异步编程，可使用线程也可以不用。将异步与线程同时讲，将有助于我们更好的理解它们的特征。本文中涉及关键知识点 1. 异步编程 2. 线程的使用 3. 基于任务的异步模式 4. 并行编程 5. 总结异步编程什么是异步操作？异步操作是指某些操作能够独立运行，不依赖主流程或主其他处理流程。通常情况下，C＃程序
spark 查看 job history 日志 Stark_Summer 日志 spark history job
SPARK_HOME/conf 下: spark-defaults.conf 增加如下内容 spark.eventLog.enabled true spark.eventLog.dir hdfs://master:8020/var/log/spark spark.eventLog.compress true spark-env.sh 增加如下内容 export SP
SSH框架搭建 wangxiukai2015eye spring Hibernate struts
MyEclipse搭建SSH框架 Struts Spring Hibernate 1、new一个web project。 2、右键项目，为项目添加Struts支持。选择Struts2 Core Libraries -<MyEclipes-Library> 点击Finish。src目录下多了struts

实现瀑布流布局效果两种方式

使用原生JavaScript实现瀑布流

使用JQuery实现瀑布流 ##（注意导入jquery.js）

运行效果如下：

你可能感兴趣的:(编程开发,Front)