白超华
白超华

javacript 实现瀑布流原理和效果, 滚动加载图片【图文解析 附源码】

先科普下瀑布流吧

瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格，像美丽说、淘宝网都有使用。

这是我实现的一个效果，就是怎么滚动都加载不玩。就跟瀑布一样流啊流！

这里的实现方式我们只说Js实现方法

实现原理：

对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度  3 最小列数 ，得到列数后，用一个数组存放盒子所有高度，找出最小高度。之后根据序列号更新高度；看着有些拗口，实现起来就很简单了。

对于滚动加载：即滚动到哪个高度后，需要去加载数据，其实这个就是列的最小高度值，这样当前滚动值和最小高度值比较一下即可判断出来，是否要触发加载数据；就是写一个函数，用来判断是否达到加载图片条件，如果达到，就开始加载。比如获得最后一张图片的offsetTop,可视区高度,滚动距离,也就是当图片的offsetTop小于可视区高度和滚动距离之和的情况下，此时就应该加载了，不过条件可以随便定，也可以等滚动到图片的一半时候在触发加载条件,如图所示:

先上HTML CSS代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>waterfall</title>
  6     <script src="script.js"></script>
  7     <style>
  8         * {
  9             margin: 0;
 10             padding: 0;
 11         }
 12         body {
 13             background: yellow;
 14         }
 15         #container {
 16 
 17         }
 18         #container .pin {
 19             padding-left: 15px;
 20             padding-top: 15px;
 21             float: left;
 22         }
 23         #container .div-box {
 24             float: left;
 25             border: 1px solid #ccc;
 26             box-shadow: 0 0 5px #bbb;
 27             background: #fff;
 28             padding: 12px;
 29             border-radius: 9px;
 30         }
 31         #container .div-box img {
 32             width: 300px;
 33         }
 34         #container .div-box p {
 35             text-align: center;
 36             font-size: 20px;
 37             font-weight: bold;
 38             color: red;
 39         }
 40     </style>
 41     <script>
 42         
 43     </script>
 44 </head>
 45 <body>
 46     <div id="container">
 47         <div class="pin">
 48             <div class="div-box">
 49                 <img src="img/1.jpg" alt="">
 50                 <p>白超华-博客园</p>
 51             </div>
 52         </div>
 53         <div class="pin">
 54             <div class="div-box">
 55                 <img src="img/2.jpg" alt="">
 56                 <p>白超华-博客园</p>
 57             </div>
 58         </div>
 59         <div class="pin">
 60             <div class="div-box">
 61                 <img src="img/3.jpg" alt="">
 62                 <p>白超华-博客园</p>
 63             </div>
 64         </div>
 65         <div class="pin">
 66             <div class="div-box">
 67                 <img src="img/4.jpg" alt="">
 68                 <p>白超华-博客园</p>
 69             </div>
 70         </div>
 71         <div class="pin">
 72             <div class="div-box">
 73                 <img src="img/5.jpg" alt="">
 74                 <p>白超华-博客园</p>
 75             </div>
 76         </div>
 77         <div class="pin">
 78             <div class="div-box">
 79                 <img src="img/6.jpg" alt="">
 80                 <p>白超华-博客园</p>
 81             </div>
 82         </div>
 83         <div class="pin">
 84             <div class="div-box">
 85                 <img src="img/7.jpg" alt="">
 86                 <p>白超华-博客园</p>
 87             </div>
 88         </div>
 89         <div class="pin">
 90             <div class="div-box">
 91                 <img src="img/8.jpg" alt="">
 92                 <p>白超华-博客园</p>
 93             </div>
 94         </div>
 95         <div class="pin">
 96             <div class="div-box">
 97                 <img src="img/9.jpg" alt="">
 98                 <p>白超华-博客园</p>
 99             </div>
100         </div>
101         <div class="pin">
102             <div class="div-box">
103                 <img src="img/10.jpg" alt="">
104                 <p>白超华-博客园</p>
105             </div>
106         </div>
107         <div class="pin">
108             <div class="div-box">
109                 <img src="img/1.jpg" alt="">
110                 <p>白超华-博客园</p>
111             </div>
112         </div>
113         <div class="pin">
114             <div class="div-box">
115                 <img src="img/2.jpg" alt="">
116                 <p>白超华-博客园</p>
117             </div>
118         </div>
119         <div class="pin">
120             <div class="div-box">
121                 <img src="img/3.jpg" alt="">
122                 <p>白超华-博客园</p>
123             </div>
124         </div>
125         <div class="pin">
126             <div class="div-box">
127                 <img src="img/4.jpg" alt="">
128                 <p>白超华-博客园</p>
129             </div>
130         </div>
131         <div class="pin">
132             <div class="div-box">
133                 <img src="img/5.jpg" alt="">
134                 <p>白超华-博客园</p>
135             </div>
136         </div>
137         <div class="pin">
138             <div class="div-box">
139                 <img src="img/6.jpg" alt="">
140                 <p>白超华-博客园</p>
141             </div>
142         </div>
143     </div>
144 </body>
145 </html>

JS代码，每行都有注释

 1 window.onload = function(){
 2     var data = {                    //模拟后台数据 的一个JSON格式的文件
 3         "data":[
 4             {"src":"1.jpg"},
 5             {"src":"2.jpg"},
 6             {"src":"3.jpg"},
 7             {"src":"4.jpg"},
 8             {"src":"5.jpg"},
 9         ]
10     };
11     window.onscroll = function(){
12         if(checkScroll()){          //判断是否具备滚动加载得条件
13             var oParent = document.getElementById('container');
14             for(var i=0; i<data.data.length; i++){
15                 var div1 = document.createElement('div');  //创建div元素
16                 div1.className = 'pin';                    //设置class
17                 oParent.appendChild(div1);
18                 var div2 = document.createElement('div');//创建div元素
19                 div2.className = 'div-box';
20                 div1.appendChild(div2);
21                 var imgs = document.createElement('img');//创建img元素
22                 imgs.style.width = '300px';
23                 imgs.src = 'img/'+data.data[i].src;    //设置读取路径
24                 div2.appendChild(imgs);
25                 var p = document.createElement('p');//创建p元素
26                 p.innerHTML = '白超华-博客园';
27                 div2.appendChild(p);
28             }
29             waterfall('container','pin');     //--注意 别忘了这句，当滚动时候就执行
30         }
31     }
32     waterfall('container','pin');
33 }
34 function waterfall(parent, box){
35     var oParent = document.getElementById(parent);//获取父级对象
36     var aBox = getByClass(oParent,box);//获取所有class为pin的盒子的集合
37     var boxWidth = aBox[0].offsetWidth;//获取一个盒子的宽
38     var pageWidth = document.body.clientWidth||document.documentElement.clientWidth;//获取可视区宽
39     var cols = Math.floor(pageWidth/boxWidth);//获得列数
40     var arrH = [];//用于存放盒子的高
41 
42     for(var i=0; i<aBox.length; i++){
43         if(i<cols){//当小于第一列个数的时候
44             arrH.push(aBox[i].offsetHeight);
45         } else {
46             var minH = Math.min.apply(null,arrH);//得到数组中盒字的最小高度minH;
47             var index = getMinIndex(arrH,minH);
48 
49             aBox[i].style.position = 'absolute';//设置绝对定位
50             aBox[i].style.top = minH+'px';//设置top，就是最小高度
51             aBox[i].style.left = aBox[0].offsetWidth*index+'px';//设置left，就是一个盒子的宽*index索引数
52             arrH[index]+=aBox[i].offsetHeight; //更新新添加盒字后的列高
53         }
54     }
55 }
56 //通过父级获取class
57 function getByClass(parent, classname){
58     var aClass = parent.getElementsByTagName('*');
59     var arr = [];
60 
61     for(var i=0; i<aClass.length; i++){
62         if(aClass[i].className == classname){
63             arr.push(aClass[i]);
64         }
65     }
66     return arr;
67 }
68 //最小值的索引index
69 function getMinIndex(arr,val){
70     for( i in arr){
71         if(arr[i] == val){
72             return i;
73         }
74     }
75 }
76 //
77 function checkScroll(){
78     var oParent = document.getElementById('container');
79     var aBox = getByClass(oParent,'pin');
80     var lastBoxHeight = aBox[aBox.length-1].offsetTop;// 当滚到到这个距离时候就开始加载
81     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//兼容的滚动距离
82     var documentHeight = document.documentElement.clientHeight; //页面高度
83     if(lastBoxHeight<scrollTop+documentHeight){
84         return true;
85     }
86 }

 

你可能感兴趣的:(javacript 实现瀑布流原理和效果, 滚动加载图片【图文解析 附源码】)

  • 为什么编程语言不能无误差的表示十进制数 编程
    在编程中，尤其是涉及到数值计算时，十进制数的表示问题是一个常见的技术挑战。虽然我们日常生活中使用的是十进制数，但计算机内部却使用二进制来存储和处理数据。由于十进制和二进制之间存在根本性的差异，编程语言无法无误差地表示十进制数。这一问题不仅涉及到计算机的基本存储方式，还与浮点数的表示精度和计算机的内存管理机制密切相关。在实践中，这种表示误差会影响许多领域的计算，包括财务、科学计算和工程应用。本文将深
  • 【北上广深杭大厂编程面试题】C++篇...这里介绍new、delete、malloc free之间的关系？ 努力毕业的小土博^_^ 计算机基础知识和编程c++java面试开发语言编程
    【北上广深杭大厂编程面试题】C++篇…这里介绍new、delete、mallocfree之间的关系？【北上广深杭大厂编程面试题】C++篇…这里介绍new、delete、mallocfree之间的关系？文章目录【北上广深杭大厂编程面试题】C++篇...这里介绍new、delete、mallocfree之间的关系？前言1.`malloc`和`free``malloc`（MemoryAllocation
  • Java面试题中高级进阶（JVM篇Java内存） 李老头探索 javajvm开发语言
    前言本来想着给自己放松一下，刷刷博客，突然被几道面试题难倒！说说Java内存结构？说说对象分配规则？描述一下JVM加载class文件的原理机制？似乎有点模糊了，那就大概看一下面试题吧。好记性不如烂键盘***12万字的java面试题整理***Java内存结构方法区和堆是所有线程共享的内存区域；而java栈、本地方法栈和程序员计数器是运行是线程私有的内存区域。Java堆（Heap）,是Java虚拟机所
  • Redis --- 使用 Pipeline 实现批处理操作 记得开心一点嘛 Redis高级redis数据库Pipeline
    在正常情况下，我们每次发送Redis命令时，客户端会等待Redis服务器的响应，直到接收到结果后，才会发送下一个命令。这种方式虽然保证了操作的顺序性，但在执行大量命令时会产生很大的网络延迟。通过Pipeline技术，我们的客户端可以将多个命令同时发送给Redis服务器，并且不需要等待每个命令的返回结果，直到所有命令都被执行完毕，客户端再一起获取返回值。这样能减少每个命令的等待时间，大幅提高执行效率
  • 【JavaSE】GUI编程（图形界面） lil_侯昊 java开发语言
    GUI（GraphicalUserInterface）图形用户界面-àjava提供的图形用户界面UI–用户界面Swing概述Javax.swing包此包中包含了java主要的图形界面的实现类●swing是一个为Java设计的GUI工具包javax.swing,该包中包括了图形用户界面的各种组件支持。●一个Java的图形界面，由各种不同类型的“元素”组成，这些“元素”被称为组件（Component）
  • 使用Python获取在线股票交易网站的实时交易数据 嵌入式开发项目 2025年爬虫精通专栏python开发语言爬虫
    目录步骤1：选择股票交易网站步骤2：使用requests库发送HTTP请求步骤3：解析HTML内容步骤4：提取实时交易数据步骤5：存储和使用数据在金融市场中，实时交易数据对于投资者来说具有重要的价值。实时的股票价格、交易量和其他市场指标可以帮助投资者做出更准确的决策，同时也是进行金融分析和建模的重要数据源。在本篇博客中，我们将学习如何使用Python获取在线股票交易网站的实时交易数据。在开始之前，
  • 【python】连接Jira获取token以及jira对象 唐古乌梁海 pythonjira
    此脚本可以连接Jira，通过Jira的token，Jira对象可以实现与Jira的交互，从而完成jira与pytest的交互，或者其他自动化测试框架也行，例如：将pytest运行结果推送jira；将jira用例与自动化测试用例建立映射关系，将功能用例对应的自动化测试用例脚本路径推送到功能用例的描述栏，或者自动化栏里面#!/usr/bin/envpython#-*-coding:utf-8-*-#@
  • 《运维工程师如何利用DeepSeek实现智能运维：分级实战指南》 进击的雷神 武林绝学：技术杂谈剑影流转运维
    目录智能运维革命：DeepSeek带来的范式转变DeepSeek核心运维能力全景解析分级实战场景与解决方案3.1初级工程师：自动化运维入门3.2中级工程师：复杂系统诊断与优化3.3高级工程师：架构级智能运维典型项目案例深度剖析4.1金融系统全链路监控体系构建4.2电商大促资源弹性调度实战4.3混合云环境下的安全加固分级能力提升路径效能提升数据验证挑战与演进方向构建智能运维体系行动指南1.智能运维革
  • MapEX - Mind the map! Accounting for existing maps when estimating online HDMaps from sensors. zisuina_2 python深度学习3d
    MapEX加入地图编码的MAP检测论文链接MapEX背景与动机：HD地图的重要性与高成本：HD地图是自动驾驶的关键组成部分，但其采集和维护成本极高。现有方法的局限性：现有方法主要依赖传感器数据生成HD地图，但通常忽略了已有的HD地图资源。当前方法最多只是对低质量地图进行地理定位或使用通用的已知地图数据库，效率和效果都有限。提出的解决方案：充分利用现有地图：在HD地图估计中引入现有HD地图资源，具体
  • 【人工智能】提升编程效率的6种GPT实用应用技巧！保姆级讲解！ ChatGPT-千鑫 人工智能AI领域人工智能gptAI编程
    文章目录实用教程：六大AI编程技巧解锁效率提升技巧1：快速实现需求demo操作步骤技巧2：代码审查——AI帮你提升代码质量操作步骤技巧3：错误排查——AI助你快速定位问题操作步骤技巧4：代码注释——AI帮你理解复杂逻辑操作步骤技巧5：数据整理——AI帮你高效准备测试数据操作步骤技巧6：学习未知代码库——AI助你快速掌握新工具操作步骤使用教程：全面掌握CodeMoss的高效编程工具（1）VSCode
  • 利用人工智能增强可读性：自动为文本添加标点符号 姚家湾 AI标点符号
    在数字通信时代，文本的清晰度和可读性至关重要。无论是转录口语、处理原始文本数据还是改进用户生成的内容，标点符号在传达预期信息方面都起着至关重要的作用。但是，手动编辑文本以添加标点符号可能非常耗时且容易出错。这就是人工智能(AI)发挥作用的地方，它提供了一种强大的解决方案，可以自动将标点符号插入句子中。目前，利用大模型的能力，完全可以胜任添加标点符号的工作，不需要其它特别的处理程序。参考代码from
  • 用 TensorFlow 搭建简单的手写数字识别模型 lozhyf 工作面试学习tensorflow人工智能python
    一、引言手写数字识别是机器学习领域中一个经典且基础的问题，它在很多实际场景中都有广泛的应用，比如邮政系统中的邮件分拣、银行支票金额识别等。TensorFlow是一个强大的开源机器学习框架，由Google开发并维护，它提供了丰富的工具和接口，能帮助我们快速搭建和训练深度学习模型。在这篇博客中，我们将使用TensorFlow构建一个简单的神经网络模型，用于识别手写数字。二、环境准备在开始之前，你需要安
  • 【FastAPI 】FastAPI 模板：提供静态文件 iFakeCoder Flaskfastapipython开发语言
    FastAPI是一个现代、快速（高性能）的Web框架，用于基于标准Python类型提示使用Python3.7+构建API。虽然它的主要用例是构建API，但FastAPI还可以轻松提供静态文件和HTML模板，从而让您可以构建全栈Web应用程序。在此博客中，我们将探讨如何使用FastAPI提供静态文件。我们将介绍基础知识并提供演示以帮助您入门。为什么要提供静态文件？静态文件是不经常更改的资产，并按原样
  • 8-项目实战-信用卡数字识别 #北极星star Opencv图像处理框架实战opencv计算机视觉人工智能
    目录(1)总体流程与方法(2)代码实现(3)识别结果(1)总体流程与方法①读取模板图像：加载包含数字模板的图像，并提取每个数字的轮廓，将它们作为模板存储。②读取输入图像：加载待识别的信用卡图像，并进行预处理。③提取数字区域：通过一系列图像处理操作（如礼帽操作、梯度计算、闭操作等）提取可能包含数字的区域。④轮廓排序与筛选：找到提取区域的轮廓，并根据轮廓的宽高比和尺寸筛选出符合条件的数字区域。⑤数字识
  • 深入解析：Tableau在数据可视化中的高级应用 Echo_Wish 实战高阶大数据信息可视化数据分析数据挖掘
    深入解析：Tableau在数据可视化中的高级应用引言在大数据时代，数据可视化已成为数据分析中不可或缺的一部分。作为一款广受欢迎的数据可视化工具，Tableau以其强大的功能和灵活性，赢得了众多数据分析师的青睐。然而，许多人在使用Tableau时，仅停留在基本操作层面，未能充分发挥其潜力。本文将深入探讨Tableau的高级应用，展示其在复杂数据分析中的强大能力，并以具体实例说明其实际应用效果。数据预
  • 深度学习在医疗影像分析中的革命性应用 Echo_Wish 人工智能前沿技术深度学习人工智能
    深度学习在医疗影像分析中的革命性应用引言医疗影像分析是现代医学中不可或缺的一部分，特别是在疾病诊断和治疗过程中发挥了至关重要的作用。随着深度学习技术的发展，医疗影像分析的效率和准确性得到了显著提升。本文将探讨如何利用深度学习技术，特别是Python编程语言，来优化医疗影像分析，展示具体的代码实例，并举例说明其实际应用效果。深度学习与医疗影像分析深度学习（DeepLearning）是一种基于人工神经
  • 无人机避障——配置新NX Perishell 无人机
    TerminalUbuntu安装Terminator及设置为默认终端_ubuntu安装terminator-CSDN博客谷歌拼音基于ubuntu20.4安装谷歌拼音中文输入法_ubuntu安装google输入法-CSDN博客JetsonOrin和Xaviernx的风扇调节Orinnx的默认风扇速度太慢，nx发烫的厉害，需要调节风速https://zhuanlan.zhihu.com/p/66558
  • 【CVPR 2021】Knowledge Review：知识蒸馏新解法 BIT可达鸭 深度学习人工智能计算机视觉模型压缩知识蒸馏
    【CVPR2021】KnowledgeReview：知识蒸馏新解法论文地址：主要问题：主要思路：符号假设：具体实现：实验结果：关注我的公众号：联系作者：论文地址：https://jiaya.me/papers/kdreview_cvpr21.pdf主要问题：目前大部分关于KD的方法都是基于相同层或者相同Block之间的知识迁移。但是Teacher往往深层表示抽象的语义信息，底层表示简单的知识的信息
  • 前端超长列表，虚拟滚动实现 大橙子- 前端cssjavascript
    虚拟滚动.container{width:300px;height:500px;overflow:hidden;border:1pxsolid#ccc;margin-top:50px;}.scroll-box{width:100%;height:100%;overflow-y:auto;overflow-x:hidden;position:relative;}.scroll-height-main
  • ECharts 柱状图X轴或Y轴空值无数据不占位不渲染不展示 大橙子- echarts前端javascript
    效果查看：将option复制到echarts解析垂直方向：//垂直方向代码示例option={legend:{//这里data省略echarts会自动匹配，也可自行配置},xAxis:[//关键点：多个X轴进行匹配{type:'category',position:'bottom',data:['2021','']//空字符串则不会展示},{type:'category',position:'bo
  • vue制作导航栏html,Vue实现导航栏菜单 DataQueen vue制作导航栏html
    本文实例为大家分享了Vue实现导航栏菜单的具体代码，供大家参考，具体内容如下这里是刚学习vue的时候，没有用vue的任何UI组件库写的导航栏菜单。menu.html导航栏左项目名称您好，用户！v-bind:class="{checked:index==nowIndex}"v-on:click="setTab('menu',index,menus)">{{menu.text}}菜单一的内容菜单二的内
  • 以太网协议介绍 归宿688 软件开发自动驾驶网络协议
    目录一.以太网主要协议关系介绍二.协议介绍及帧结构2.1媒体访问控制子层协议MAC2.2地址解析协议ARP2.2.1ARP帧结构2.2.2ARP协议工作原理2.3网际互连协议IP2.3.1IP协议帧2.3.2IP数据报分片重组2.4互联网控制消息协议ICMP2.5用户数据报协议UDP2.6传输控制协议TCP一.以太网主要协议关系介绍  网络结构可以分为五层，自底向上依次为：物理层、数据链路层、网络
  • python whoosh clisy python开源搜索
    原文地址：http://whoosh.ca/wikiWhoosh:高效的纯python全文搜索组件Whoosh是一个纯python实现的全文搜索组件。Whoosh不但功能完善，还非常的快。Whoosh的作者是MattChaput，由SideEffectsSoftware公司开发。项目的最初用于Houdini（SideEffectsSoftware公司开发的3D动画软件）的在线帮助系统。SideEf
  • 如何更好的设计测试用例？ 爱如 少年 笔记
    测试用例设计的最基本要求：覆盖住所要测试的功能。这是再基本不过的要求了，但别看只是简单的一句话，要能够达到切实覆盖全面，需要对被测试产品功能的全面了解、明确测试范围(特别是要明确哪些是不需要测试的)、具备基本的测试技术(如：等价类划分等)等。那么满足了上述这条要求是不是设计出来的测试用例就是好的测试用例了呢?答案：在理论上是，但在实际工程中还远远不是。之所以理论和实际会有这样的差别，是因为在理论上
  • 钉钉酷应用开发 死神黑夜降临 项目酷应用
    钉钉酷应用开发注意事项背景介绍注意事项1开发注意2授权注意3上线注意背景介绍钉钉针对应用进行微化的一种升级，与应用是绑定一起的。注意事项1开发注意钉钉应用分为三方应用和企业内部应用，酷应用依托于钉钉应用，故其也存在三方应用和内部应用的区分二者的不同点，三方酷应用想在手机端调试或者电脑端调试，需要提交发布申请，提交后，填写的访问地址链接不能修改；内部应用不存在这个问题，是可以随时修改的，这点很重要，
  • 勒索病毒攻击：如何应对和恢复 测试者家园 网络安全软件测试质量效能web安全安全网络运维项目管理病毒
    近年来，勒索病毒（Ransomware）已经成为全球信息安全领域最具破坏力的威胁之一。无论是个人用户，还是大中型企业，甚至政府机构，勒索病毒的攻击频率和破坏性日益增加。2020年及2021年，勒索病毒攻击不仅数量激增，且其攻击手法、目标和传播方式也变得更加复杂、精密和具有针对性。勒索病毒是一种恶意软件，它通过加密受害者的文件、系统或网络，迫使受害者支付赎金以恢复访问权限。虽然支付赎金可能暂时解决问
  • vue-router 中滚动行为设置的妙用 代码搬运媛 vue.jsjavascript前端
    在vue-router里，滚动行为设置能够对路由切换时的页面滚动位置进行控制，这在单页面应用（SPA）里十分有用，能够为用户带来更流畅、更符合预期的浏览体验。下面为你详细介绍滚动行为设置的作用和使用方法。作用恢复滚动位置当用户在某个页面滚动到特定位置后，再导航到其他页面，之后又返回到该页面时，滚动行为设置可以让页面恢复到之前的滚动位置。这在浏览长页面或者列表页时非常实用，用户无需重新滚动到之前查看
  • Java集合之ArrayList（含源码解析 超详细） &星辰入梦来& Java集合javapython开发语言
    1.ArrayList简介ArrayList的底层是数组队列，相当于动态数组。与Java中的数组相比，它的容量能动态增长。在添加大量元素前，应用程序可以使用ensureCapacity操作来增加ArrayList实例的容量。这可以减少递增式再分配的数量。ArrayList继承于AbstructList，实现了List，RandomAccess，Cloneable，Java.io.Serializa
  • 设计模式-模板方法实现 阿绵 设计模式java开发语言
    文章目录模式结构模式特点示例代码输出结果关键点解析模式的优缺点使用场景总结模板方法模式（TemplateMethodPattern）是一种行为型设计模式，它定义了一个操作中的算法骨架，而将某些步骤的实现延迟到子类中。通过这种方式，模板方法模式可以让子类在不改变算法结构的情况下，重新定义算法中的某些步骤模式结构模板方法模式的结构包括以下几个关键部分：抽象类（AbstractClass）：定义算法的骨
  • 数据库基础以及 MySQL 知识点 阿绵 计算机基础数据库mysql
    文章目录1、基本概念2、主键和外键的区别2.1、使用外键的优劣3、数据库范式4、drop、delete与truncate区别？5、MySQL1、基础概念2、存储引擎2.1、InnoDB和MyISAM区别2.2、InnoDB如何保持事务的四大特性（实现事务的原理）3、锁机制与InnoDB锁算法3.1、表级锁和行级锁对比4、事务4.1、ACID特性4.2、并发事务带来的问题4.3、事务隔离级别1、基本
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他