小白葫芦
小白葫芦

js瀑布流可加载更多

  1. 第一个是html文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="stylesheet" href="../css/css1.css">
    <script src="瀑布流js.js">script>
head>
<body>

    <div id="container">
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/1.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/2.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/3.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/4.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/5.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/6.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/7.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/8.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/9.jpg" alt="">
            div>
        div>
        <div class="box">
            <div class="box_img">
                <img src="../Image/10.jpg" alt="">
            div>
        div>
    div>
body>
html>
  1. 第二个是css文件
*{
    margin: 0px;
    padding: 0px;
}
img{
    width: 150px;
    height: aotu;
}
.box_img{
    padding: 5px;
    border: 1px solid #cccccc;
    box-shadow: 0 0 5px #ccc;
    border-radius: 5px;
}

#container{
    position: relative;
}
.box{
    padding: 5px;
    float: left;
}
  1. 第三个是js文件
window.onload = function () {
    imgLocation("container","box");
    var imgData = {"data":[{"src":"../Image/1.jpg"},{"src":"../Image/2.jpg"},{"src":"../Image/3.jpg"},
            {"src":"../Image/4.jpg"},{"src":"../Image/5.jpg"},{"src":"../Image/6.jpg"},
            {"src":"../Image/7.jpg"},{"src":"../Image/8.jpg"},{"src":"../Image/9.jpg"},{"src":"../Image/10.jpg"}]}
    window.onscroll = function () {
        if (checkFlag()){
            var cparent = document.getElementById("container");
            for (var i = 0;i < imgData.data.length;i++){
                //创建一个div元素 box
                var ccontent = document.createElement("div");
                ccontent.className = "box";
                //放在container里面
                cparent.appendChild(ccontent);
                //创建一个div元素 box_img 放在 box 里面
                var boxImg = document.createElement("div");
                boxImg.className = "box_img";
                //将box_img放在box 里面
                ccontent.appendChild(boxImg);
                //创建图片节点
                var img = document.createElement("img");
                //图片的来源是 上面定义的数组内的
                img.src = imgData.data[i].src;
                //将图片添加在box_img 里面
                boxImg.appendChild(img);
            }
            imgLocation("container","box");
        }
    }
}
function checkFlag() {
    var cparent = document.getElementById("container");
    var cconent = getChildElement(cparent,"box");
    var lastContentHeight = cconent[cconent.length - 1].offsetTop;
    //滚动条滚动的时候，值一点一点的在增加 获取滚动条的位置
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    //浏览器窗口的大小
    var pageHeight = document.documentElement.clientHeight||document.body.offsetHeight;
    //如果滚动条的位置加上 页面的高度 大于 最后一张图片的位置高度
    if (lastContentHeight < scrollTop + pageHeight){
        return true;
    }

    //console.log(lastContentHeight+":"+scrollTop+":"+pageHeight);
}
function imgLocation(parent,content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildElement(cparent,content);//得到10个name为box的div
    var imgWidth = ccontent[0].offsetWidth;
    //var width = document.documentElement.clientWidth;
    var calc = Math.floor(document.documentElement.clientWidth / imgWidth);
    //以下一行代码 是设置父节点div标签的宽度 一定要注意 width后面有冒号:
    //设置了之后 页面的布局就不会随着我们拉动页面大小 图片位置发生变化了
    cparent.style.cssText = "width:" + (imgWidth * calc) +"px;margin:0 auto";

    var BoxHeightArr = [];
    for (var i = 0;i < ccontent.length;i++){
        //这里ccontent.length == 10 calc == 8
        if(i < calc){
            BoxHeightArr[i] = ccontent[i].offsetHeight;
        }else {
            //得到高度最低的图片的高度
            var minHeight = Math.min.apply(null,BoxHeightArr);
            //得到高度最低的图片的位置索引
            var index = getMinHeightLocation(BoxHeightArr,minHeight);
            //设置位置为绝对定位
            ccontent[i].style.position = "absolute";
            //将其余的图片放入到最短高度的图片下面
            ccontent[i].style.top = minHeight + "px";
            //图片向左居中
            ccontent[i].style.left = ccontent[index].offsetLeft+"px";
            //此时高度最低的图片高度 == 本身高度+加上去的图片的高度
            BoxHeightArr[index] = BoxHeightArr[index] + ccontent[i].offsetHeight;
        }
    }
}
//找到高度最低的图片的索引
function getMinHeightLocation(BoxHeightArr,minHeight) {
    for (var i in BoxHeightArr){
        if (BoxHeightArr[i] == minHeight){
            return i;
        }
    }
}
//得到name为box的节点数组
function getChildElement(parent,content) {
    var contentArr = [];
    //得到所有元素
    var allcantent = parent.getElementsByTagName("*");
    for (var i = 0;i < allcantent.length;i++){
        //如果节点的className == "box"
        if (allcantent[i].className == content){
            //那么元素加入到 contentArr数组里面
            contentArr.push(allcantent[i]);
        }
    }
    return contentArr;
}

你可能感兴趣的:(js瀑布流可加载更多)

  • UI学习——cell的复用和自定义cell Magnetic_h ui学习
    目录cell的复用手动（非注册）自动（注册）自定义cellcell的复用在iOS开发中，单元格复用是一种提高表格（UITableView）和集合视图（UICollectionView）滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时，如果没有可复用的单元格，则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕，它就不会被销毁。相反，它被添
  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • 【一起学Rust | 设计模式】习惯语法——使用借用类型作为参数、格式化拼接字符串、构造函数 广龙宇 一起学Rust#Rust设计模式rust设计模式开发语言
    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、使用借用类型作为参数二、格式化拼接字符串三、使用构造函数总结前言Rust不是传统的面向对象编程语言，它的所有特性，使其独一无二。因此，学习特定于Rust的设计模式是必要的。本系列文章为作者学习《Rust设计模式》的学习笔记以及自己的见解。因此，本系列文章的结构也与此书的结构相同（后续可能会调成结构），基本上分为三个部分
  • C#中使用split分割字符串 互联网打工人no1 c#
    1、用字符串分隔：usingSystem.Text.RegularExpressions;stringstr="aaajsbbbjsccc";string[]sArray=Regex.Split(str,"js",RegexOptions.IgnoreCase);foreach(stringiinsArray)Response.Write(i.ToString()+"");输出结果：aaabbbc
  • Goolge earth studio 进阶4——路径修改与平滑 陟彼高冈yu Googleearthstudio进阶教程旅游
    如果我们希望在大约中途时获得更多的城市鸟瞰视角。可以将相机拖动到这里并创建一个新的关键帧。camera_target_clip_7EarthStudio会自动平滑我们的路径，所以当我们通过这个关键帧时，不是一个生硬的角度，而是一个平滑的曲线。camera_target_clip_8路径上有贝塞尔控制手柄，允许我们调整路径的形状。右键单击，我们可以选择“平滑路径”，这是默认的自动平滑算法，或者我们可
  • 【华为OD机试真题2023B卷 JAVA&JS】We Are A Team 若博豆 java算法华为javascript
    华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代
  • 数组去重 好奇的猫猫猫
    整理自js中基础数据结构数组去重问题思考？如何去除数组中重复的项例如数组：[1,3,4,3,5]我们在做去重的时候，一开始想到的肯定是，逐个比较，外面一层循环，内层后一个与前一个一比较，如果是久不将当前这一项放进新的数组，挨个比较完之后返回一个新的去过重复的数组不好的实践方式上述方法效率极低，代码量还多，思考？有没有更好的方法这时候不禁一想当然有了！！！hashtable啊，通过对象的hash办法
  • 【JS】执行时长(100分) |思路参考+代码解析（C++） l939035548 JS算法数据结构c++
    题目为了充分发挥GPU算力，需要尽可能多的将任务交给GPU执行，现在有一个任务数组，数组元素表示在这1秒内新增的任务个数且每秒都有新增任务。假设GPU最多一次执行n个任务，一次执行耗时1秒，在保证GPU不空闲情况下，最少需要多长时间执行完成。题目输入第一个参数为GPU一次最多执行的任务个数，取值范围[1,10000]第二个参数为任务数组长度，取值范围[1,10000]第三个参数为任务数组，数字范围
  • 其二 十八尾喵
    你知道吗？图片发自App我今天知道了你有喜欢的人，不是我。心空空的，整个人都不是我的了。可，怎么办？还是要好好的活着，毕竟你喜欢的人，我不能杀，可是我可以杀其他喜欢你的人呀！也罢，此生无缘，来世再见。鱼干
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • CX8836：小体积大功率升降压方案推荐（附Demo设计指南） 诚芯微科技 社交电子
    CX8836是一颗同步四开关单向升降压控制器，在4.5V-40V宽输入电压范围内稳定工作，持续负载电流10A，能够在输入高于或低于输出电压时稳定调节输出电压，可适用于USBPD快充、车载充电器、HUB、汽车启停系统、工业PC电源等多种升降压应用场合，为大功率TYPE-CPD车载充电器提供最优解决方案。提供CX8836Demo测试、CX8836样品申请及CX8836方案开发技术支持。CX8836同升
  • 闲鱼鱼小铺怎么开通？鱼小铺开通需要哪些流程？ 高省APP大九
    闲鱼鱼小铺是平台推出的一个专业程度的店铺，与普通店铺相比会有更多的权益，比如说发布的商品数量从50增加到500；拥有专业的店铺数据看板与分析的功能，这对于专门在闲鱼做生意的用户来说是非常有帮助的，那么鱼小铺每个人都能开通吗？大家好，我是高省APP联合创始人蓓蓓导师，高省APP是2021年推出的电商导购平台，0投资，0风险、高省APP佣金更高，模式更好，终端用户不流失。【高省】是一个可省钱佣金高，能
  • docker igotyback eureka云原生
    Docker容器的文件系统是隔离的，但是可以通过挂载卷（Volumes）或绑定挂载（BindMounts）将宿主机的文件系统目录映射到容器内部。要查看Docker容器的映射路径，可以使用以下方法：查看容器配置：使用dockerinspect命令可以查看容器的详细配置信息，包括挂载的卷。例如：bashdockerinspect在输出的JSON格式中，查找"Mounts"部分，这里会列出所有的挂载信息
  • 《大兴安岭猎人传说》今年最好看的东北鬼怪故事，很优秀 一部电影
    《大兴安岭猎人传说》是最新上映于愚人节的网剧，别看是网剧却远超出我的个人预料。该片由民俗故事改编，这点就很吸引人，因为民俗故事口口相传，比那些编造而成的鬼故事更具有了真实性，网大做的电影还不错哦，如果可以我打四星好评。大兴安岭的故事我们经常听老人提起，那里有原始大森林，物产丰富，更流传着精灵怪物的传说。什么红黄白柳灰，出马仙、人参娃娃的故事层出不穷，以大兴安岭为背景的故事真不少。可很多鬼片看到最后
  • 在Ubuntu中编译含有JSON的文件出现报错 芝麻糊76 Linuxkill_buglinuxubuntujson
    在ubuntu中进行JSON相关学习的时候，我发现了一些小问题，决定与大家进行分享，减少踩坑时候出现不必要的时间耗费截取部分含有JSON部分的代码进行展示char*str="{\"title\":\"JSONExample\",\"author\":{\"name\":\"JohnDoe\",\"age\":35,\"isVerified\":true},\"tags\":[\"json\",\"
  • 《经年驯养》黎栀傅谨臣（高分女频）全章节在线阅读 云轩书阁
    《经年驯养》黎栀傅谨臣（高分女频）全章节在线阅读主角：黎栀傅谨臣简介：傅谨臣养大黎栀，对她有求必应，黎栀以为那是爱。结婚两年才发现，她不过他豢养最好的一只宠物，可她拿他当全世界。关注微信公众号【看精灵】去回个书號【9328】，即可阅读【经年驯养】小说全文！第10章温柔的眼神，宠溺的动作，留恋的话近乎情人低语。是黎栀做梦都想要的一切……她口干舌燥，紧张难言。一颗心似被浸泡在温水里，酥麻舒适，无可抗拒
  • Xinference如何注册自定义模型 玩人工智能的辣条哥 人工智能AI大模型Xinference
    环境：Xinference问题描述：Xinference如何注册自定义模型解决方案：1.写个model_config.json，内容如下{"version":1,"context_length":2048,"model_name":"custom-llama-3","model_lang":["en","ch"],"model_ability":["generate","chat"],"model
  • 中原焦点团队网络初中级30期阴丽丽坚持分享第三百八十八次2022.10.18分享 约练次数（74） 咨询师（6） 来访者（53） 观察者（15） 阴丽丽
    今天是忙碌的一天，一早起来，总想着找点把事情弄完，可总也弄不完。就这样弄着吧！孩子的事，自己的事都在那里搁置着，不想做，有点欧！今天总体还不错，只是在下午起床时走神了俩小时，也算是给自己的放松吧！今日难得1.儿子乖巧、听话，努力配合，一天下来也是忙忙碌碌，这真的很难得！2.儿子今天录的视频被班主任认可，这真的很难得3.我今天早上做核酸时，自己把教案整了一下，这真的很难得
  • 女儿考研完报考雅思 捡拾流年
    是否我过于焦虑？会不会无形间让女儿觉得压力太大了啊。2022年对于我们家来说是不平常的一年。女儿今年大四，为了准备考研，暑假也没回家，年初去了学校到了年末才回家。女儿自己一个人面对考研，没有参加培训，大四学校作业论文等课业也多，她同时也是很努力复习考研的。在疫情开放很多羊的时期，女儿终于顺顺利利参加12月24、25号的考研，我们和家人都觉得女儿回家来要好好休息调养。可女儿回到家，我再查阅考研信息，
  • 摘选《靠谱》 海伦美少女
    作家池莉说：“靠谱，说起来简单，落下去复杂；听起来像感觉，做起来是原则。”靠谱的人，为人正直有原则，做事稳重重诺言。在他们眼里，人品比钱财重要，良心比利益可贵。和他们深交，不用防备，无需猜疑，相处最是舒心。魏晋名士嵇康和山涛，同为竹林七贤，两人私交甚笃。后来，山涛出仕为司马氏效力，嵇康则隐居山林。山涛几次举荐嵇康入朝为官，都被嵇康拒绝，最后甚至写下了绝交书。世人都认为两人恩断义绝，可两年后，嵇康遭
  • 继续《时光音乐会》 湘梅子
    平安夜，与我无关。晚饭后陪孙子玩，直到他入睡。回家，看期待的周五《时光音乐会》。今天的庄主是郁可唯。出道十多年，竟然为影视唱了八十多首歌。她的歌声很温暖，有时还很空灵，声音处理很细腻，听起来很享受。原来《知否，知否》是她原唱，当时电视剧很火，歌我也学会了。我也喜欢她的《路过人间》歌友们谈笑风生，我这个观众也不时会心笑着。每次看完这个节目，总是意犹未尽。也只有这个节目，我先生有兴趣跟我一起看完，还总
  • 古风原创 慕白漓
    【江南月】词:慕白漓曲:《庐州月》西厢一语惊醒梦中月光佳人为何素眉不添淡妆抚帕刺秀绵缎一缕清香南望飞雁又归西方城外又闻秋稻泛黄成殇细雨纷飞里春又归乡离家而去的你是否迷失彷徨一句诺言永记心上家书一封道尽咏平常青草才青暮色又飘扬等也难当回又何妨古拙的山水今又细水流长江南月光照耀湖旁如今的情也已不在心上十载月晃容颜覆黄问一句你今在他乡何方江南月光苏州城隍孤单的你可还记得夜凉西厢人忘你是否还在独唱却唱不出
  • 如何培养兴趣 绽蕊向阳
    今天读李笑来的书《与时间做朋友》，读到有关兴趣部分，深有感触。书中提到，好多人说对某事没有兴趣，实际上是没有能力把这件事做好，做这件事时的感受很不好，有挫败感，每个人对自己不擅长做不好的事情，都本能的容易逃避，所以就以为自己对这件事不感兴趣，他们真正感兴趣的是其他事情。可事实上，出现这种感觉应该仅仅是因为还没有开始做那件事情，也还没有在那件事情上遭受挫折而已。其实，很多人真的放弃原来做的事情，转去
  • 可以赚钱的app，你们都在用哪些？ 配音新手圈
    1.七猫免费小说2.有柿3.番茄小说兼职副业推荐公众号，配音新手圈，声优配音圈，新配音兼职圈，配音就业圈，鼎音副业，有声新手圈，每天更新各种远程工作与在线兼职，职位包括：写手、程序开发、剪辑、设计、翻译、配音、无门槛、插画、翻译、等等。。。每日更新兼职。4.速读免费小说5.得间免费小说6.快手7.快手极速8.抖音火山版（可提0.2，可能我懒赚的慢，但真不推荐）9.拼多多10.淘宝11.点淘12.美
  • 《西游记》观后感 领读者李轩颖
    西游记相信大家都不陌生，但我还是要给有些人讲一讲。长话短说，当然了，开头就是孙悟空的讲解，孙悟空本为一块仙石，然而因风化作一石猴。猪八戒是天蓬元帅，后因调戏王母娘娘的孙女织女后被打入凡间，投胎为猪，后名猪八戒。沙和尚因常年居住在流沙河中千年未出，所以名为沙僧。唐僧原名唐三藏，后因被吴来佛祖西天取经简名为唐僧。师徒四人历经了九九八十一磨难，最终取到了西经。然而最后师傅唐僧让他们回去的时候，可四人都恋
  • 《前夫如龙》王昊江琼（独家小说）精彩TXT阅读 海边书楼
    《前夫如龙》王昊江琼（独家小说）精彩TXT阅读主角：王昊江琼简介：离婚那天，她视他如泥土。谁曾想，消息一出，天下震动！可关注微信公众号【风车文楼】去回个书号【203】，即可免费阅读【前夫如龙】全文！江芸并未听出华少龙声音里的冷漠，依旧一脸笑容道：“是啊，那个废物哪儿配得上我姐？这些年，我姐对他仁至义尽了。以后，华少爷可以多跟我姐接触接触，只有华少爷这样的人，才配得上我姐啊！”江琼低着头，微微有些娇
  • Python神器！WEB自动化测试集成工具 DrissionPage 亚丁号 python开发语言
    一、前言用requests做数据采集面对要登录的网站时，要分析数据包、JS源码，构造复杂的请求，往往还要应付验证码、JS混淆、签名参数等反爬手段，门槛较高。若数据是由JS计算生成的，还须重现计算过程，体验不好，开发效率不高。使用浏览器，可以很大程度上绕过这些坑，但浏览器运行效率不高。因此，这个库设计初衷，是将它们合而为一，能够在不同须要时切换相应模式，并提供一种人性化的使用方法，提高开发和运行效率
  • Mongodb Error: queryTxt ETIMEOUT xxxx.wwwdz.mongodb.net 佛一脚 errorreactmongodb数据库
    背景每天都能遇到奇怪的问题，做个记录，以便有缘人能得到帮助！换了一台电脑开发nextjs程序。需要连接mongodb数据，对数据进行增删改查。上一台电脑好好的程序，新电脑死活连不上mongodb数据库。同一套代码，没任何修改，搞得我怀疑人生了，打开浏览器进入mongodb官网毫无问题，也能进入线上系统查看数据，网络应该是没问题。于是我尝试了一下手机热点，这次代码能正常跑起来，连接数据库了！！！是不
  • 曾国藩的“为官”理念——做官发财可耻 久久艳阳天1
    曾国藩说：大凡做官的人，往往厚于妻子而薄于兄弟，私肥于一家而刻薄于亲戚族党。予自三十岁以来，即以做官发财为可耻，以宦囊积金遗子孙为可羞可恨，故私心立誓，总不靠做官发财以遗后人，神明鉴临，予不食言。曾国藩直言，做官发财可耻。当下，我们有谁敢这样说？我们只是含含糊糊的说，做官不是为了发财，想发财就别做官，云云。而事实是当官就是为了发财去的。曾国藩立志，不给后人留钱财。而今，为人父母者，却穷极一生处心积
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • LeetCode[位运算] - #137 Single Number II Cwind javaAlgorithmLeetCode题解位运算
    原题链接：#137 Single Number II  要求： 给定一个整型数组，其中除了一个元素之外，每个元素都出现三次。找出这个元素 注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间   难度：中等   分析： 与#136类似，都是考察位运算。不过出现两次的可以使用异或运算的特性 n XOR n = 0, n XOR 0 = n，即某一
  • 《JavaScript语言精粹》笔记 aijuans JavaScript
    0、JavaScript的简单数据类型包括数字、字符创、布尔值（true/false）、null和undefined值，其它值都是对象。 1、JavaScript只有一个数字类型，它在内部被表示为64位的浮点数。没有分离出整数，所以1和1.0的值相同。 2、NaN是一个数值，表示一个不能产生正常结果的运算结果。NaN不等于任何值，包括它本身。可以用函数isNaN(number)检测NaN,但是
  • 你应该更新的Java知识之常用程序库 Kai_Ge java
    在很多人眼中，Java 已经是一门垂垂老矣的语言，但并不妨碍 Java 世界依然在前进。如果你曾离开 Java，云游于其它世界，或是每日只在遗留代码中挣扎，或许是时候抬起头，看看老 Java 中的新东西。 Guava Guava[gwɑ:və]，一句话，只要你做Java项目，就应该用Guava（Github）。 guava 是 Google 出品的一套 Java 核心库，在我看来，它甚至应该
  • HttpClient 120153216 httpclient
    /** * 可以传对象的请求转发，对象已流形式放入HTTP中 */ public static Object doPost(Map<String,Object> parmMap,String url) { Object object = null; HttpClient hc = new HttpClient(); String fullURL
  • Django model字段类型清单 2002wmj django
    Django 通过 models 实现数据库的创建、修改、删除等操作，本文为模型中一般常用的类型的清单，便于查询和使用： AutoField：一个自动递增的整型字段，添加记录时它会自动增长。你通常不需要直接使用这个字段；如果你不指定主键的话，系统会自动添加一个主键字段到你的model。(参阅自动主键字段) BooleanField：布尔字段,管理工具里会自动将其描述为checkbox。 Cha
  • 在SQLSERVER中查找消耗CPU最多的SQL 357029540 SQL Server
    返回消耗CPU数目最多的10条语句 SELECT TOP 10    total_worker_time/execution_count AS avg_cpu_cost, plan_handle,    execution_count,    (SELECT SUBSTRING(text, statement_start_of
  • Myeclipse项目无法部署，Undefined exploded archive location 7454103 eclipseMyEclipse
    做个备忘！ 错误信息为：       Undefined exploded archive location 原因：           在工程转移过程中，导致工程的配置文件出错； 解决方法：    
  • GMT时间格式转换 adminjun GMT时间转换
    普通的时间转换问题我这里就不再罗嗦了，我想大家应该都会那种低级的转换问题吧，现在我向大家总结一下如何转换GMT时间格式，这种格式的转换方法网上还不是很多，所以有必要总结一下，也算给有需要的朋友一个小小的帮助啦。 1、可以使用 SimpleDateFormat SimpleDateFormat    EEE-三位星期 d-天 MMM-月 yyyy-四位年
  • Oracle数据库新装连接串问题 aijuans oracle数据库
    割接新装了数据库，客户端登陆无问题，apache/cgi-bin程序有问题，sqlnet.log日志如下： Fatal NI connect error 12170.   VERSION INFORMATION:         TNS for Linux: Version 10.2.0.4.0 - Product
  • 回顾java数组复制 ayaoxinchao java数组
    在写这篇文章之前，也看了一些别人写的，基本上都是大同小异。文章是对java数组复制基础知识的回顾，算是作为学习笔记，供以后自己翻阅。首先，简单想一下这个问题：为什么要复制数组？我的个人理解：在我们在利用一个数组时，在每一次使用，我们都希望它的值是初始值。这时我们就要对数组进行复制，以达到原始数组值的安全性。java数组复制大致分为3种方式：①for循环方式 ②clone方式 ③arrayCopy方
  • java web会话监听并使用spring注入 bewithme Java Web
            在java web应用中，当你想在建立会话或移除会话时，让系统做某些事情，比如说，统计在线用户，每当有用户登录时，或退出时，那么可以用下面这个监听器来监听。        import java.util.ArrayList; import java.ut
  • NoSQL数据库之Redis数据库管理(Redis的常用命令及高级应用) bijian1013 redis数据库NoSQL
    一 .Redis常用命令         Redis提供了丰富的命令对数据库和各种数据库类型进行操作，这些命令可以在Linux终端使用。         a.键值相关命令         b.服务器相关命令 1.键值相关命令       &
  • java枚举序列化问题 bingyingao java枚举序列化
    对象在网络中传输离不开序列化和反序列化。而如果序列化的对象中有枚举值就要特别注意一些发布兼容问题: 1.加一个枚举值 新机器代码读分布式缓存中老对象，没有问题，不会抛异常。 老机器代码读分布式缓存中新对像，反序列化会中断，所以在所有机器发布完成之前要避免出现新对象，或者提前让老机器拥有新增枚举的jar。 2.删一个枚举值 新机器代码读分布式缓存中老对象，反序列
  • 【Spark七十八】Spark Kyro序列化 bit1129 spark
    当使用SparkContext的saveAsObjectFile方法将对象序列化到文件，以及通过objectFile方法将对象从文件反序列出来的时候，Spark默认使用Java的序列化以及反序列化机制，通常情况下，这种序列化机制是很低效的，Spark支持使用Kyro作为对象的序列化和反序列化机制，序列化的速度比java更快，但是使用Kyro时要注意，Kyro目前还是有些bug。 Spark
  • Hybridizing OO and Functional Design bookjovi erlanghaskell
      推荐博文： Tell Above, and Ask Below - Hybridizing OO and Functional Design 文章中把OO和FP讲的深入透彻，里面把smalltalk和haskell作为典型的两种编程范式代表语言，此点本人极为同意，smalltalk可以说是最能体现OO设计的面向对象语言，smalltalk的作者Alan kay也是OO的最早先驱，
  • Java-Collections Framework学习与总结-HashMap BrokenDreams Collections
            开发中常常会用到这样一种数据结构，根据一个关键字，找到所需的信息。这个过程有点像查字典，拿到一个key，去字典表中查找对应的value。Java1.0版本提供了这样的类java.util.Dictionary(抽象类)，基本上支持字典表的操作。后来引入了Map接口，更好的描述的这种数据结构。  &nb
  • 读《研磨设计模式》-代码笔记-职责链模式-Chain Of Responsibility bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /** * 业务逻辑：项目经理只能处理500以下的费用申请，部门经理是1000，总经理不设限。简单起见，只同意“Tom”的申请 * bylijinnan */ abstract class Handler { /*
  • Android中启动外部程序 cherishLC android
    1、启动外部程序 引用自： http://blog.csdn.net/linxcool/article/details/7692374 //方法一 Intent intent=new Intent(); //包名 包名+类名（全路径） intent.setClassName("com.linxcool", "com.linxcool.PlaneActi
  • summary_keep_rate coollyj SUM
    BEGIN /*DECLARE minDate varchar(20) ; DECLARE maxDate varchar(20) ;*/ DECLARE stkDate varchar(20) ; DECLARE done int default -1; /* 游标中 注册服务器地址 */ DE
  • hadoop hdfs 添加数据目录出错 daizj hadoophdfs扩容
    由于原来配置的hadoop data目录快要用满了，故准备修改配置文件增加数据目录，以便扩容，但由于疏忽，把core-site.xml, hdfs-site.xml配置文件dfs.datanode.data.dir 配置项增加了配置目录，但未创建实际目录，重启datanode服务时，报如下错误： 2014-11-18 08:51:39,128 WARN org.apache.hadoop.h
  • grep 目录级联查找 dongwei_6688 grep
           在Mac或者Linux下使用grep进行文件内容查找时，如果给定的目标搜索路径是当前目录，那么它默认只搜索当前目录下的文件，而不会搜索其下面子目录中的文件内容，如果想级联搜索下级目录，需要使用一个“-r”参数： grep -n -r "GET" .   上面的命令将会找出当前目录“.”及当前目录中所有下级目录
  • yii 修改模块使用的布局文件 dcj3sjt126com yiilayouts
    方法一：yii模块默认使用系统当前的主题布局文件，如果在主配置文件中配置了主题比如: 'theme'=>'mythm', 那么yii的模块就使用 protected/themes/mythm/views/layouts 下的布局文件； 如果未配置主题，那么 yii的模块就使用  protected/views/layouts 下的布局文件， 总之默认不是使用自身目录 pr
  • 设计模式之单例模式 come_for_dream 设计模式单例模式懒汉式饿汉式双重检验锁失败无序写入
                    今天该来的面试还没来，这个店估计不会来电话了，安静下来写写博客也不错，没事翻了翻小易哥的博客甚至与大牛们之间的差距，基础知识不扎实建起来的楼再高也只能是危楼罢了，陈下心回归基础把以前学过的东西总结一下。   *********************************
  • 8、数组 豆豆咖啡 二维数组数组一维数组
      一、概念       数组是同一种类型数据的集合。其实数组就是一个容器。   二、好处       可以自动给数组中的元素从0开始编号，方便操作这些元素   三、格式   //一维数组 1,元素类型[] 变量名 = new 元素类型[元素的个数] int[] arr =
  • Decode Ways hcx2013 decode
    A message containing letters from A-Z is being encoded to numbers using the following mapping: 'A' -> 1 'B' -> 2 ... 'Z' -> 26 Given an encoded message containing digits, det
  • Spring4.1新特性——异步调度和事件机制的异常处理 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • squid3(高命中率)缓存服务器配置 liyonghui160com
        系统:centos 5.x   需要的软件:squid-3.0.STABLE25.tar.gz 1.下载squid wget http://www.squid-cache.org/Versions/v3/3.0/squid-3.0.STABLE25.tar.gz tar zxf squid-3.0.STABLE25.tar.gz &&
  • 避免Java应用中NullPointerException的技巧和最佳实践 pda158 java
    1) 从已知的String对象中调用equals()和equalsIgnoreCase()方法，而非未知对象。 　　总是从已知的非空String对象中调用equals()方法。因为equals()方法是对称的，调用a.equals(b)和调用b.equals(a)是完全相同的，这也是为什么程序员对于对象a和b这么不上心。如果调用者是空指针，这种调用可能导致一个空指针异常 Object unk
  • 如何在Swift语言中创建http请求 shoothao httpswift
    概述：本文通过实例从同步和异步两种方式上回答了”如何在Swift语言中创建http请求“的问题。 如果你对Objective-C比较了解的话，对于如何创建http请求你一定驾轻就熟了，而新语言Swift与其相比只有语法上的区别。但是，对才接触到这个崭新平台的初学者来说，他们仍然想知道“如何在Swift语言中创建http请求？”。 在这里,我将作出一些建议来回答上述问题。常见的
  • Spring事务的传播方式 uule spring事务
    传播方式：        新建事务       required       required_new   - 挂起当前         非事务方式运行       supports   &nbs
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他