丶阿喜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;
}

运行效果如下：

数据结构-----队列磨十三数据结构算法 linux
顺序队列（Queue）一、队列核心概念1.基本特性先进先出（FIFO）：最早入队的元素最先出队操作限制：队尾（Rear）：唯一允许插入的位置队头（Front）：唯一允许删除的位置2.顺序队列结构typedefintDATATYPE;typedefstructqueue{DATATYPE*ptr;//存储空间基地址inttlen;//队列总容量inthead;//队头索引inttail;//队尾索引
Swoole v6 要来了！即将增加多线程支持 phpswoole
在PHP+Swoole的服务器编程开发中，协程的支持已经解决了大部分难题，但是我们发现跨进程读写数据依然很难，需要借助进程间通信（IPC）、Redis、Swoole\Table或其他共享内存实现。Redis、IPC进程间通信方式性能较差。而Swoole\Table的问题是需要固定分配内存，无法扩容，存在诸多限制。除此之外，多进程的调试非常麻烦，例如我们要使用gdb就需要gdb-p逐个进程去追踪，而
FastAPI 最佳架构项目推荐穆耀双
FastAPI最佳架构项目推荐fastapi_best_architectureFastAPIbasedontheconstructionofthefrontandbackoftheseparationofrightscontrolsystem,usingauniquepseudothree-tierarchitecturemodeldesign,andasatemplatelibraryfree
[2]2025年新手集成开发环境（IDE）选择指南 Aqua_chang ide python vscode conda
本文涵盖‌主流IDE推荐（分场景）‌、‌安装配置详解及‌高频问题解决方案‌，如数据科学领域必备工具‌Anaconda‌和‌Spyder‌，帮助新手快速上手编程开发。一、‌IDE核心作用与分类‌集成开发环境‌（IDE）是什么？‌集成代码编辑、编译、调试、版本管理等功能的开发工具，提升效率。优势：代码补全、调试便捷、插件扩展。‌新手选择原则‌‌轻量级工具‌（如VSCode）适合入门；‌专业型IDE‌（
【USTC 计算机网络】第二章：应用层 - TCP & UDP 套接字编程柃歌计算机网络计算机网络 tcp/ip udp websocket 网络协议
本文详细介绍了TCP与UDP套接字编程，并在Windows下使用C++实现套接字编程，对代码做了十分精细的讲解，这部分内容非常重要，是计算机网络学到目前为止第一次编程，也是网络编程开发中最基础的一个部分，必须彻底掌握。1.Windows使用C++实现TCPSocket在Windows下进行套接字编程需要遵循如下步骤：初始化Winsock库：使用WSAStartup初始化Winsock库。该函数需要
Rasa Webchat：开源聊天机器人组件乌昱有Melanie
RasaWebchat：开源聊天机器人组件rasa-webchatAfeature-richchatwidgetforRasaandBotfront项目地址:https://gitcode.com/gh_mirrors/ra/rasa-webchatRasaWebchat是一个开源项目，旨在为Rasa或Botfront开发的虚拟助手提供在任意网站上部署的聊天窗口组件。该项目主要使用JavaScri
MTK ADSP yyc_audio 嵌入式硬件
MTK音频硬件概念AFE：音频前端硬件audiofrontendhwAFEMEMIF(FE):PCMDMA,memoryread/writeAudiointerconnection:connectionfabricforaudiosubmodule。核心路由器件。负责FE和BE之间的连接和路由。DAI(BE):DigitalAudioI/F,eTDM/I2S/DMIC.–EnhancedTDM,c
自用leetcode IDEA插件配置 QHG7C0 数据结构与算法（二刷）leetcode
文件名：P$!{question.frontendQuestionId}$!velocityTool.camelCaseName(${question.titleSlug})代码模版：${question.content}packageleetcode.editor.cn;//${question.title}publicclassP${question.frontendQuestionId}_$
【算法设计-链栈和链队列】链栈和链队列的实现 baimeng5720 算法设计
1.链队列。利用带有头结点的单链表来实现链队列,插入和删除的复杂度都为o(1)代码：#include#includetypedefstructQnode{intdata;Qnode*next;}Qnode;typedefstructLinkQueue{Qnode*front;Qnode*rear;}LinkQueue;voidinitialize(LinkQueue*LinkQueue){Link
链栈以及链队列的实现 L_rose C#
链队列的实现：只有入队以及出队classQueueLink//链队列{publicintcount;publicNodefront;//头节点publicNoderear;//尾节点publicQueueLink(){front=null;rear=null;count=0;}publicvoidEnqueue(Tvalue){//入队NodenewNode=newNode(value);if(c
2.2[frontEnd]ESLint CQU_JIAKE 前端 java
ESLint是一个开源的JavaScript和TypeScript代码质量和代码风格检查工具。它可以帮助开发者检测代码中的问题（如语法错误、潜在的错误、不一致的代码风格等），从而提高代码质量和可维护性。主要功能检测语法错误：ESLint可以检测代码中的语法错误，例如未关闭的括号、缺少分号等。代码风格检查：ESLint可以强制代码风格的一致性，例如：缩进风格（2空格或4空格）。引号类型（单引号或双引
C++协程入门教程 ox0080 #北漂+滴滴出行 C++协程 VIP 激励 c++开发语言
一、环境搭建（Docker+双编译系统）1.全能Docker环境配置FROMubuntu:22.04#基础工具链RUNapt-getupdate&&DEBIAN_FRONTEND=noninteractiveapt-getinstall-y\build-essentialcmakebazelgitg++-12libcppcoro-dev\openssh-serverrsyslogcurlgnupg
DeepSeek高能低耗AI创作突破智能计算研究中心其他
内容概要随着人工智能技术向垂直领域加速渗透，生成式模型的应用边界正经历革命性拓展。DeepSeek系列产品通过670亿参数混合专家架构，构建起覆盖学术研究、内容创作与编程开发的多模态解决方案。该架构融合视觉语言理解与多语言处理能力，在保持高响应速度的同时，显著降低算力消耗，其单位计算成本仅为同类产品的三分之一。值得关注的是，系统搭载的DeepSeekProver学术引擎可自动生成文献综述框架，而D
（PTA）数据结构（作业）6、队列 MapleInori 数据结构数据结构算法 c++
栈是后进先出的线性表（LastInFirstOut，LIFO），插入和删除的操作都在栈顶进行。队列是先进先出的线性表（FirstInFirstOut，FIFO），插入在队尾进行，删除在队头进行。循环队列的两种区别队满和队空的方式，1）少用一个元素，即当队列空间大小为m时，有m-1个元素就默认时队满。队空的条件：Q.front==Q.rear队满的条件：(Q.rear+1)%m==Q.front2）
【数据结构】——二叉树的遍历算法忽现忽隐数据结构二叉树队列数据结构算法 c++
题目要求编写程序，用先序递归遍历法（或输入先序及中序递归遍历结点访问序列）建立二叉树的二叉链表存储结构，计算并输出二叉树的结点总数以及树的高度；然后输出其先序、中序、后序以及层次遍历结点访问次序。其中层次遍历的实现需使用循环队列。二叉树结点数据类型建议选用字符类型。数据结构设计采用C++的模板类，创建队列。每个队列对象中，elem指针用来建立长度为n的数组，n表示队列的容量，front表示队头指针
智能科技助力健康生活：开启体育与健身的新纪元 inscode_010
最新接入DeepSeek-V3模型，点击下载最新版本InsCodeAIIDE智能科技助力健康生活：开启体育与健身的新纪元在现代社会，科技的迅猛发展不仅改变了我们的生活方式，也深刻影响了体育与健身领域。从智能穿戴设备到虚拟现实训练系统，技术的进步为人们提供了前所未有的健身体验。而今天，我们将探讨一款强大的智能化工具——它不仅仅适用于编程开发，更能在体育与健身领域发挥巨大作用，帮助我们实现更加高效、科
Cool Admin5(Go版)后台管理系统开发框架搭建使用记录后青春期的诗go 经验分享 golang 开发语言后端 go
一、环境说明nodejs建议版本：18二、安装安装框架github下载最新的zip压缩包，然后解压。#进入解压缩后的目录cdcool-admin5#直接修改go.mod里面的模块名（或删除原go.mod文件，重新初始化：Gomodinitcool-admin5）#根据需要调整man.go文件里的导入路径#安装依赖gomodtidy#运行后端项目Gorun.#进入前端目录Cdfrontend#安装依
一篇文章让你实现前端JS 、 Golang 、 Python如何接入DeepSeek大模型实现自己的AI 一只理智恩 AI 前端后端 python golang javascript
本文将通过三种技术栈实现与DeepSeek大模型的对话交互，提供可直接运行的代码示例及详细注释。一、通用准备步骤1.获取API密钥登录DeepSeek开发者平台创建应用获取DEEPSEEK_API_KEY2.创建测试环境#项目结构deepseek-demo/├──frontend/#前端代码│└──index.html├──go-backend/#Golang后端│└──main.go├──py-
unity shader卡通渲染（描边）+阴影+多光源处理 QO_GQ shader shader unity3d
说道卡通渲染，应该都会想到描边：我所学的描边有三种：一种是计算边缘深度检测描边一种是色差检测描边一种是利用顶点法线向外扩展返回单色pass，使用正面裁剪我用的第三种：pass{//剔除前面（朝向摄像机的面）保留内部渲染CullFrontCGPROGRAM#pragmafragmentfragfloat4_LineColor;float_Line;structa2v{float4pos:POSITI
ARM N2微架构介绍「已注销」 CPU微架构 verilog
简介之前在“ARMV2处理器微架构介绍”一文中介绍了面向服务器、云计算等应用的ARMV2处理器微架构，V系列具有更强性能，N系列强调性能和功耗等方向的平衡，本文就将介绍一下ARMN2处理器微架构相比较前代的一些提升。尽管ARM还具备一代N1/V1的服务器端处理器，但严格意义讲N2是ARM相对成熟的第一代服务器端处理器IP。前端Front-End前端的设计相比较前代可以说是巨大提升，预测和取指依然是
webpack5（Module Federation）+vue3.0实现微前端 weixin_42140041 前端奇淫技巧前端 javascript vue.js
项目源码地址：https://github.com/wuxiaohuaer/webpack5-vue-admin一、什么是微前端微前端是一个比较宏观的概念，他的核心就是独立，开发独立、部署独立，比较适合大的团队来进行重量级项目开发。从MicroFrontends官网可以了解到，微前端概念是从微服务概念扩展而来的，摒弃大型单体方式，将前端整体分解为小而简单的块，这些块可以独立开发、测试和部署，同时仍
Flet 项目常见问题解决方案龙香令Beatrice
Flet项目常见问题解决方案fletFletenablesdeveloperstoeasilybuildrealtimeweb,mobileanddesktopappsinPython.Nofrontendexperiencerequired.项目地址:https://gitcode.com/gh_mirrors/fl/flet1.项目基础介绍和主要编程语言Flet是一个开源框架，允许开发者在Py
Flet 框架教程樊贝路Strawberry
Flet框架教程fletFletenablesdeveloperstoeasilybuildrealtimeweb,mobileanddesktopappsinPython.Nofrontendexperiencerequired.项目地址:https://gitcode.com/gh_mirrors/fl/flet1.项目介绍Flet是一个框架，它允许开发者使用Python轻松构建实时的Web、
react组件设计原则_前端组件设计原则 weixin_39825259 react组件设计原则
原标题：前端组件设计原则译者：@没有好名字了译文：https://github.com/lightningminers/article/issues/36，https://juejin.im/post/5c49cff56fb9a049bd42a90f作者：@AndrewDinihan原文：https://engineering.carsguide.com.au/front-end-componen
智能编程新时代：基于DeepSeek的编程开发工具引领未来 inscode_056
智能编程新时代：基于DeepSeek的编程开发工具引领未来随着人工智能技术的飞速发展，编程开发工具也在不断进化。如今，一款融合了DeepSeek的强大AI能力的编程开发工具正在改变着开发者的工作方式，为他们带来了前所未有的高效与便捷。本文将详细介绍这款工具的应用场景、巨大价值，并引导读者体验其带来的变革。最新接入DeepSeek-V3模型，点击下载最新版本InsCodeAIIDE一、智能化编程的新
HarmonyOS编程开发实战：获取网络连接信息并选择一种绑定到应用示例代码中的爱马仕鸿蒙 HarmonyOS OpenHarmony harmonyos 华为驱动开发前端鸿蒙网络 android
1.网络类型简介移动设备一般都具备移动网络和无线WIFI的连接能力，有些还可以接入有线以太网，这些网络可以根据需要随时切换。鸿蒙APP可以自动适应上述的网络，一般来说，会优先使用WIFI或者有线以太网，移动网络因为要收费，不会首选使用。但是在某些特殊情形下，可能要求必须使用某一种网络，比如必须使用蜂窝网络，这时候就需要显示的配置一下，指定app使用该网络类型。2.Web组件及控制器常用方法网络连接
数据结构之队列，哈希表不知真不只数据结构散列表
一队列(先进先出)1.定义：从一端进行数据插入，另一端进行删除的线性存储结构队列类型常见操作-入队（Enqueue）：将新元素添加到队列的尾部。若队列有空间，新元素会成为队列的新尾部元素；若队列已满，可能会触发队列已满的处理机制。-出队（Dequeue）：从队列的头部移除元素。执行后，原队头元素被删除，原队头的下一个元素成为新队头。若队列为空，可能会触发队列空的处理机制。-获取队头元素（Front
Doris集群启停脚步江畔独步数据仓库
ApacheDoris是一个基于MPP（大规模并行处理）架构的高性能、实时的分析型数据库。在Doris中，FE（Frontend）、BE（Backend）和Broker组件有特定的启动和关闭顺序，下面详细介绍一下。一、启动顺序通常按照FE->BE->Broker的顺序启动，以下是对该顺序的详细解释：启动FEFE是Doris的前端节点，负责元数据管理、查询规划、权限管理等功能，是整个系统的核心控制节
论文阅读-秦汉时期北方边疆组织的空间互动模式与直道的定位（中国） MilkLeong 论文阅读空间计算
论文英文题目：AspatialinteractionmodelofQin-HanDynastyorganisationonthenorthernfrontierandthelocationoftheZhidaohighway(China)发表于：journalofarchaeologicalscience，影响因子：3.030论文主要是使用空间互动模型来对秦汉时期的北方边疆直道进行定位和重建。分析
搜广推校招面经四十四 Y1nhl 搜广推面经 python 机器学习人工智能 pytorch 开发语言
快手主站推荐算法一、因果里面前门准则是什么（Front-DoorCriterion）前门准则是因果推断中的一个重要概念，用于在存在未观测混杂因素的情况下识别因果效应。它由朱迪亚·珀尔（JudeaPearl）提出，是后门准则的补充。1.1.定义前门准则适用于以下情况：存在一个中介变量MMM，它完全介导了处理变量XXX对结果变量YYY的因果效应。处理变量XXX和结果变量YYY之间存在未观测的混杂因素U
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)