JS原生效果瀑布流布局的实现(一)

JS原生效果 实现：

HTML页面布局：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title></title>
  6         <link href="css/style.css" type="text/css" rel="stylesheet"/>
  7         <script type="text/javascript" src="js/js.js"></script>
  8     </head>
  9     <body>
 10         <div id="main">
 11             <div class="box">
 12                 <div class="pic">
 13                     <img src="img/1.jpg" />
 14                 </div>
 15             </div>
 16             <div class="box">
 17                 <div class="pic">
 18                     <img src="img/2.jpg" />
 19                 </div>
 20             </div>
 21             <div class="box">
 22                 <div class="pic">
 23                     <img src="img/3.jpg" />
 24                 </div>
 25             </div>
 26             <div class="box">
 27                 <div class="pic">
 28                     <img src="img/4.jpg" />
 29                 </div>
 30             </div>
 31             <div class="box">
 32                 <div class="pic">
 33                     <img src="img/5.jpg" />
 34                 </div>
 35             </div>
 36             <div class="box">
 37                 <div class="pic">
 38                     <img src="img/6.jpg" />
 39                 </div>
 40             </div>
 41             <div class="box">
 42                 <div class="pic">
 43                     <img src="img/7.jpg" />
 44                 </div>
 45             </div>
 46             <div class="box">
 47                 <div class="pic">
 48                     <img src="img/8.jpg" />
 49                 </div>
 50             </div>
 51             <div class="box">
 52                 <div class="pic">
 53                     <img src="img/9.jpg" />
 54                 </div>
 55             </div>
 56             <div class="box">
 57                 <div class="pic">
 58                     <img src="img/10.jpg" />
 59                 </div>
 60             </div>
 61             <div class="box">
 62                 <div class="pic">
 63                     <img src="img/11.jpg" />
 64                 </div>
 65             </div>
 66             <div class="box">
 67                 <div class="pic">
 68                     <img src="img/12.jpg" />
 69                 </div>
 70             </div>
 71             <div class="box">
 72                 <div class="pic">
 73                     <img src="img/13.jpg" />
 74                 </div>
 75             </div>
 76             <div class="box">
 77                 <div class="pic">
 78                     <img src="img/14.jpg" />
 79                 </div>
 80             </div>
 81             <div class="box">
 82                 <div class="pic">
 83                     <img src="img/15.jpg" />
 84                 </div>
 85             </div>
 86             <div class="box">
 87                 <div class="pic">
 88                     <img src="img/16.jpg" />
 89                 </div>
 90             </div>
 91             <div class="box">
 92                 <div class="pic">
 93                     <img src="img/17.jpg" />
 94                 </div>
 95             </div>
 96             <div class="box">
 97                 <div class="pic">
 98                     <img src="img/18.jpg" />
 99                 </div>
100             </div>
101             <div class="box">
102                 <div class="pic">
103                     <img src="img/19.jpg" />
104                 </div>
105             </div>
106             <div class="box">
107                 <div class="pic">
108                     <img src="img/20.jpg" />
109                 </div>
110             </div>
111             <div class="box">
112                 <div class="pic">
113                     <img src="img/21.jpg" />
114                 </div>
115             </div>
116             
117             
118         </div>
119     </body>
120 </html>
View Code

 

CSS样式效果：

1 * {margin: 0;padding: 0;}
2 img{display: block;}
3 #main{position: relative;}
4 .box{padding: 15px 0 0 15px;float: left;}
5 .pic{padding: 10px;border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; display: block;}
6 .pic img{width: 165px;height: auto;}
View Code

 

JS实现：

1、将main下所有的class为box的元素取出来，封装一个获取class的一个函数 getByClass();

//根据class获取元素
function getByClass(parent,clsName){
	var boxArr=[];//用来存储获取到的所有的class为box的元素
	oElements=parent.getElementsByTagName("*");
	for(var i=0;i<oElements.length;i++){
		if(oElements[i].className==clsName){
			boxArr.push(oElements[i]);
		};
	};
	return boxArr;	
};

 

2、计算页面当中，显示多少列（页面宽/box的宽）

var oBoxW=oBoxs[0].offsetWidth;
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
//设置main的宽
oParent.style.cssText='width:'+oBoxW*cols+'px;margin:0 auto;';

 

3、对页面 图片进行定位

注：第一排图片是不需要进行定位的，但是第二行的第一张图片要出现在上一行当中盒子最矮的下面，紧接着第八张依次排列上一行当中盒子最矮的下面！

JS原生效果瀑布流布局的实现(一)_第1张图片

 

4、定义一个数组，存放页面上每列高度的数组！

var hArr=[];//存放每一列高度的数组

 最开始，数组中存放的是第一行中每列的高度值，之后就是存放着每一列的所有高度值的总和！

 1     for(var i=0;i<oBoxs.length;i++){//遍历所有 class为box的 盒子
 2         if(i<cols){//如果i小于列数
 3             hArr.push(oBoxs[i].offsetHeight);//那么 就把这些盒子的高度存放在hArr数组里
 4         }else{
 5             var minH=Math.min.apply(null,hArr);
 6             var index=getMinhIndex(hArr,minH);
 7             oBoxs[i].style.position='absolute';
 8             oBoxs[i].style.top=minH+'px';
 9             oBoxs[i].style.left=oBoxW*index+'px';
10             
11             hArr[index]+=oBoxs[i].offsetHeight;//修改列的高度 12         };
13     };

 

5、判断数组中最小的值：

var minH=Math.min.apply(null,hArr);

 求出最小值在数组中的索引值 :

遍历数组中每一个值，拿每一个值跟val比较，如果 相等，则该索引值就是我们需要的

function getMinhIndex(arr,val){
	for(var i in arr){
		if(arr[i]==val){
			return i;	
		}
	}
};

 

6、拖动滚动条，不断加载剩下的图片！并不是拖动了滚动条，我们 就 需要 加载数据，我们需要检测一下，是否具备加载数据块的条件！（检测最后一张图片）

 JS原生效果瀑布流布局的实现(一)_第2张图片

 

当我们拖动滚动条的时候，最后一张图片还未进入可视区域内，是不需要加载图片的！

 JS原生效果瀑布流布局的实现(一)_第3张图片

 

 当最后一张图片进入到 可视区域高度的一半的时候，开始加载图片！

 

判断当最后一张图片高度的一半距离页面顶部的距离 <  滚动条滚动的距离+页面可是的区域 成立的时候，开始加载图片！

 

//检测是否具备了滚动条加载数据的条件
function checkScrollSlide(){
	var oParent=document.getElementById('main');
	var oBoxs=getByClass(oParent,'box');
	var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
	var scrollTop=document.body.scrollTop || document.documentElement.scrollTop;
	var height=document.body.clientHeight || document.documentElement.clientHeight;
	
	return (lastBoxH<scrollTop+height)?true:false;
};

 

	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='img/'+dataInt.data[i].src;
				oPic.appendChild(oImg);
			};
							
			waterfall("main","box");
		};

 

 

 

你可能感兴趣的:(瀑布流)

  • 鸿蒙系统（HarmonyOS）应用开发之实现瀑布流图片展示效果 伍哥的传说 HarmonyOS资源harmonyos华为前端鸿蒙鸿蒙系统
    项目概述科技图库是一款基于鸿蒙系统（HarmonyOS）开发的高品质图片浏览应用，专注于展示精选科技主题图片。应用采用现代化的瀑布流布局，为用户提供流畅、直观的浏览体验，让科技之美尽收眼底。主要功能1.瀑布流布局展示自适应网格：采用双列瀑布流布局，根据图片原始比例自动调整显示大小流畅滚动：优化的性能确保即使加载大量图片也能保持流畅的滚动体验优雅加载：加载状态优雅展示，提供良好的用户反馈2.高清图片
  • React Native 新架构 sgegv 程序员reactnative架构react.js
    批处理。对Native调用进行排队，批量处理。异步设计的好处是不阻塞，这种设计在大部分情况下性能满足需求，但是在某些情况下就会出问题，比如瀑布流滚动。当瀑布流向下滑动的时候，需要发请求给服务端拿数据进行下一步渲染。滚动事件发生在UIthread，然后通过Bridge发给JSthread。JSthread监听到消息后发请求，服务端返回数据，再通过Bridge返回给Native进行渲染。由于都是异步，
  • iOS 抖音导航栏首页一键分两列功能的实现 I烟雨云渊T ioscocoamacos
    要实现iOS抖音首页导航栏的“一键分两列”功能（通常指将单列内容切换为双列瀑布流布局），需结合自定义导航栏控件与布局动态切换逻辑。以下是关键实现步骤和技术要点，基于iOS原生开发框架（Swift/Objective-C）：一、核心功能需求分析导航栏按钮触发在导航栏右侧添加功能按钮（如“分列”图标），点击后切换内容布局（单列↔双列）。内容布局动态切换内容区域（如UICollectionView）需支
  • Jetpack Compose瀑布流实现方案 时小雨 AndroidJetpackAndroid基础Android实战与技巧androidkotlinjavaandroidjetpackandroidx
    本文全面解析在JetpackCompose中实现瀑布流布局的两种主流方案，涵盖基础实现、性能优化及核心源码解析，助你轻松应对复杂布局需求。一、瀑布流布局概述瀑布流布局（WaterfallFlowLayout）是一种常见的图片展示形式，其特点是等宽不等高，根据图片原始比例进行动态高度计算并排列。这种布局可以避免裁剪导致的图片内容缺失，同时提供更加灵活的视觉体验。常见于图片社区、电商商品展示等场景。与
  • 改进自己的图片 app waterHBO python
    1.起因，目的:前面我写过一个图片app，最新做了些改动。把原来的一列，改为3列，继续使用瀑布流手机上使用，更流畅，横屏显示为2列。2.先看效果3.过程:过程太细碎了，这里只是做一下记录。完整项目，见：这里4.结论+todo增加一个顶部导航栏，增加上传图片，我写过，只是需要拼接起来。请求的顺序，如何改为随机。即刷新前端页面，后端的图片顺序也是重新修改了。希望对大家有帮助。
  • HarmonyOS 开发实践 —— 基于RN框架实现高性能瀑布流页面 六号嘉宾 移动开发HarmonyOS鸿蒙开发harmonyosArkUI移动开发鸿蒙开发组件化RN界面布局
    往期学习笔录：鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中……一、简介本文针对应用开发中相当常见的瀑布流页面
  • Flutter实现不规则瀑布流布局拖拽重排序 倾云鹤 Flutter#Flutter组件flutter
    因为业务，所以需要用flutter去实现一种不规则图形的瀑布流，但是同时需要支持拖拽并重新排序。效果类似如下。查询过现有的插件，要么是仅支持同样大小的组件进行排序，要么就是动画效果不是很满意，有点死板，总有这样那样的问题，所以自己写了一个，地址如下：staggered_reorderableversion0.0.12支持的功能：scrollDirection：指定布局方向，支持水平和垂直。dura
  • 改写自己的浏览器插件工具 myChromeTools waterHBO javascript
    1.起因，目的:前面我写过，自己的一个浏览器插件小工具最近又增加一个小功能，可以自动滚动页面，尤其是对于那些瀑布流加载的网页。最新的代码都在这里2.先看效果3.过程:代码1,模拟鼠标自然滚动//处理滚动控制逻辑，响应popup.js发送的startScroll和stopScroll消息。(function(){letscrollInterval=null;functionsmoothAutoScr
  • vue2实现【瀑布流布局】 Stella2521 前端css
    瀑布流1.解释2.形成结构和样式3.自定义指令1.解释瀑布流特征：等宽不等高：元素宽度固定，高度根据内容自适应。错落排列：元素像瀑布一样从上到下依次填充，自动寻找最短列插入体现：图中第一排1，2，3元素中，3是最短高度，就是该行最短列。2.形成结构和样式updateLayout(el)"class="card-item"v-for="itemincardDate":key="item.id":st
  • 前端如何使用 Vue.js 实现瀑布流布局 前端视界 前端vue.jsjavascriptai
    前端如何使用Vue.js实现瀑布流布局关键词：Vue.js、瀑布流布局、响应式设计、虚拟滚动、性能优化、IntersectionObserver、CSSGrid摘要：本文将深入探讨如何使用Vue.js实现高性能的瀑布流布局。我们将从基础概念出发，逐步介绍多种实现方案，包括纯CSS方法、JavaScript动态计算方案，以及结合虚拟滚动的高性能实现。文章将详细分析每种方案的优缺点，提供完整的代码示例
  • 鸿蒙OS&UniApp 制作动态加载的瀑布流布局#三方框架 #Uniapp 淼学派对 uniapp鸿蒙osuni-appharmonyos
    使用UniApp制作动态加载的瀑布流布局前言最近在开发一个小程序项目时，遇到了需要实现瀑布流布局的需求。众所周知，瀑布流布局在展示不规则尺寸内容（如图片、商品卡片等）时非常美观和实用。但在实际开发过程中，我发现普通的flex或grid布局很难满足这一需求，尤其是当需要配合上拉加载更多功能时，更是增加了实现难度。经过一番摸索和实践，我总结出了一套在UniApp中实现动态加载瀑布流布局的方案，希望能给
  • 数仓_范式建模/维度建模 cllblogs 数据仓库数据仓库数据建模
    范式建模ThirdNormalForm，3NF是数据模型常用的一个方法，主要解决关系型数据库的数据存储。目前关系型数据库的建模方法，大部分采用三范式建模，即通过实体关系（EntityRelationship，ER）模型描述企业业务。是数据仓库之父Inmon提出的集线器的自上而下（EDW-DM）的数据仓库架构，即从数据源到数据仓库再到数据集市的（先有数据仓库再有数据市场）一种瀑布流开发方法。第三范式
  • 一种面向多设备跨平台的高性能自适应布局能力研究和实现【附实现代码—ArkTS】鸿蒙应用开发技术 一键难忘 鸿蒙应用开发ArkTS高性能自适应布局能力
    背景与需求说明业界UI框架提供了基础的组件、布局、事件、动效等能力，但都缺乏高级的布局容器(比如下图中的瀑布流组件等)，另外，随着设备的种类越来越多，屏幕尺寸多样化，如何做到多设备自适应以及高性能体验一直是应用开发的关键诉求及难点；本课题通过基于ArkUI相关能力设计并实现适合多设备跨平台的高级可自定义布局组件（比如类似瀑布流组件）；本课题包括如下内容：1、基于自定义布局能力实现适合多设备和跨平台
  • 瀑布流分页控件的设计与实现 轩辕姐姐
    本文还有配套的精品资源，点击获取简介：瀑布流布局是网页设计中用于图片展示和产品列表的布局方式，具有自适应特性，使页面元素随浏览器窗口大小变化自动调整。瀑布流分页控件结合瀑布流布局与分页功能，优化内容加载，提升用户体验。该控件的实现涉及响应式设计、异步加载、布局算法、元素尺寸处理、分页接口和用户体验优化等多个技术点。开发者可通过JavaScript库、框架或CSSGrid/Flexbox技术实现瀑布
  • 瀑布流H5页面不再难！纯JS实现+分页加载，让你轻松上手！ hulianwangjike2026 javascript前端html
    在H5页面上实现瀑布流的显示方式，可以产生错落有致的美感，让用户在浏览时不至于视觉疲劳，更吸引用户继续浏览。虽然已有很多的瀑布流插件，但是大多较复杂，整合到自己的系统中时，有可能产生冲突，解决这些冲突还需要花额外的时间，并且对动态加载的分页支持可能也会有冲突，所以我们需要个很简单的瀑布流插件，通过极少的代码，就可以实现，以下介绍两种极简的方式，同时分析下他们的优缺点，供大家参考。纯css方式：通过
  • （十四）安卓开发中的RecyclerView详解 匹马夕阳 Android开发android
    在安卓开发中，RecyclerView是一个功能强大且灵活的UI组件，用于高效地显示大量数据集合，如列表、网格或瀑布流。它是传统ListView和GridView的现代替代品，提供了更高的性能优化和自定义能力。RecyclerView的核心优势在于其视图回收机制，通过重用不再可见的视图来减少内存消耗和提升滚动性能。本文将详细讲解RecyclerView的基本概念、核心组成部分、使用步骤，并结合代码
  • Vue - vue-waterfall-plugin 瀑布流组件（Vue2+Vue3） miaomiaowins vue.js前端javascript
    Vue-vue-waterfall-plugin瀑布流组件（Vue2+Vue3）vue-waterfall-plugin瀑布流组件有Vue2和Vue3版本，支持PC和移动端自适应，支持animate.css的所有动画效果，支持图片懒加载，可自定义卡片之间间距、卡片入场动画和延迟时间等。一、安装vue-waterfall-pluginVue2：npminstallvue-waterfall-plug
  • HarmonyOS NEXT 中级开发笔记：艺术展览类应用的ArkTS实践 harmonyos-next
    最近在尝试用ArkTS应用开发语言为HarmonyOSNEXT开发一个艺术展览类的应用。作为刚接触鸿蒙生态不久的开发者，记录一些过程中的思考片段，供同行参考。界面构建与数据绑定艺术展览应用的核心是展品展示页，这里用ArkTS的声明式UI实现了一个瀑布流布局。比较特别的是，HarmonyOSNEXT的List组件对性能优化做得很好，即使加载高清图片也能保持流畅滚动。typescript//展品卡片组
  • uni-app前端处理瀑布流V2写法 HWT? uni-app
    如果后端返回的数据是:[{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…},{…}]这个形式一次性返回的话,前端要怎么处理分页并持续加载更多,下面将一步一步展开本文用到了uniapp提供的scro
  • H5项目实践：视差滚动与图片瀑布流的实现 木木黄木木 html5前端css3html
    H5项目实践：视差滚动与图片瀑布流的实现这里写目录标题H5项目实践：视差滚动与图片瀑布流的实现一、视差滚动效果实现1.项目概述2.技术实现2.1HTML结构设计2.2CSS核心技术3.性能优化二、图片瀑布流实现1.项目概述2.技术实现2.1布局设计2.2核心功能实现3.性能优化三、项目总结四、参考资源一、视差滚动效果实现1.项目概述视差滚动（ParallaxScrolling）是一种网页设计技巧，
  • flutter-实现瀑布流布局及下拉刷新上拉加载更多 冲浪的鹏多多 Flutterflutter
    文章目录1.效果预览2.结构分析3.完整代码4.总结1.效果预览在Flutter应用开发中，瀑布流布局常用于展示图片、商品列表等需要以不规则但整齐排列的内容。同时，下拉刷新和上拉加载更多功能，能够极大提升用户体验，让用户方便地获取最新和更多的数据。预览图如下：2.结构分析先安装依赖插件#瀑布流布局：https://pub.dev/packages/waterfall_flowwaterfall_f
  • 软件工程简答题整理 ~进无止境~ 软件工程软件工程简答题
    软件工程考试简答题整理瀑布模型是软件工程中应用最广泛的过程模型，试述采用瀑布模型进行软件开发的基本过程，该过程有何特点？答:1.基本过程:瀑布模型规定了各项软件工程活动，包括需求分析、规格说明、设计、编码、测试和维护，并规定了它们自上而下、相互衔接的固定次序，如同瀑布流水，逐级而下。2.特点阶段间具有顺序性和依赖性；清楚区分逻辑设计和物理设计，尽可能推迟程序的物理实现；每个阶段都必须完成规定的文档
  • 按照时间排序的分布式游标分页 像云~ 记录分布式
    背景最近有这么一个需求，就是在分页查询的时候，需要返回最近的pagesize条记录，即按照时间倒序的近pagesize条记录。有两个问题：一个就是这些记录来自于不同的存储位置，不能通过一次查询统一排序取数据，而需要分开查询读入，再汇总统一排序另一个就是在进行分页的时候，要保证当前页数据与上一页的连贯性，有点类似刷短视频的瀑布流。即分页查询是统一的，而数据存储是分布式的。方案由于是在高并发的场景下，
  • HarmonyOS NEXT开发实战：视频全屏切换案例 一晃有一秋 鸿蒙鸿蒙实例harmonyos华为鸿蒙鸿蒙系统android音视频
    介绍本示例介绍了@ohos.multimedia.media组件和@ohos.window接口实现媒体全屏的功能。该场景多用于首页瀑布流媒体播放等。效果图预览使用说明：点击全屏按钮，横屏媒体窗口。点击恢复窗口按钮，恢复媒体窗口。实现步骤初始化@ohos.multimedia.media的AVPlayer。asyncInit():Promise{awaitthis.release();constco
  • 【HarmonyOS NEXT应用开发】案例140：基于RN框架实现高性能瀑布流页面 青少年编程作品集 HarmonyOSNext应用开发案例harmonyos华为华为云华为odjson
    1.简介本文针对应用开发中相当常见的瀑布流页面场景，基于按需渲染、组件复用等技术，使用RN框架实现了高性能瀑布流页面。本文提供详细的开发步骤，帮助开发人员高效实现高性能瀑布流页面。1.1基本概念瀑布流：瀑布流布局在应用开发中非常常见。它利用容器的布局规则，将元素项目从上到下排列，形成多列参差不齐、不断加载的效果，使内容像瀑布般倾泻而下。由于其特点，瀑布流常用于展示图片资讯、购物商品和直播视频等多种
  • 鸿蒙ArkUI瀑布流开发实战：WaterFlow组件与LazyForEach高效实现 写雨.0 HarmonyOSNEXTharmonyos华为
    前言瀑布流布局（WaterfallFlow）是购物、资讯类应用的核心交互设计，如何在鸿蒙ArkUI中高效实现多列动态加载与滚动优化？本文将以小红书类似的结构为例，手把手教你使用WaterFlow组件与LazyForEach懒加载技术，解决数据量大时的性能瓶颈，并提供多设备适配方案。一、ArkUI瀑布流核心组件1.WaterFlow组件鸿蒙的WaterFlow组件是瀑布流布局的容器，支持以下关键属性
  • 【开源精选】《前端铺子》：打造你的全能型小程序开发助手 平淮齐Percy
    【开源精选】《前端铺子》：打造你的全能型小程序开发助手qdpz-uniapp项目基于vue-uniapp，使用colorUi与uView框架，完美支持微信小程序，包含功能：自定义TabBar与顶部、地图轨迹回放、电子签名、自定义相机/键盘、拍照图片水印、在线答题、证件识别、周边定位查询、文档预览、各种图表、行政区域、海报生成器、视频播放、主题切换、时间轴、瀑布流、排行榜、渐变动画、加载动画、请求封
  • 一个基于vue3的图片瀑布流组件 周万宁.FoBJ vue.js前端
    演示介绍基于vue3的瀑布流组件演示地址:https://wanning-zhou.github.io/vue3-waterfall/安装npmnpminstallwq-waterfall-vue3yarnyarnaddwq-waterfall-vue3pnpmpnpmaddwq-waterfall-vue3使用importWaterfallfrom'wq-waterfall-vue3'const
  • 手摸手，带你实现移动端H5瀑布流布局 初见雨夜 前端javascript前端csscss3html5
    移动端瀑布流布局是一种比较流行的网页布局方式，视觉上来看就是一种像瀑布一样垂直落下的排版。每张图片并不是显示的正正方方的，而是有的长有的短，呈现出一种不规则的形状。但是它们的宽度通常都是相同的因为移动端瀑布流布局主要为竖向瀑布流，因此本文所探讨的是竖向瀑布流特点竖向瀑布流布局主要有下面几种特点：一般出现在移动端H5页面底部主要以图片或视频为主降低页面复杂度，节省空间，可以容纳更多内容不规则展示，不
  • Canvas高级动画：文字瀑布流 DTcode7 HTML网站开发#canvas绘图HTML绘图canvasJavaScriptcanvas绘图
    Canvas高级动画：文字瀑布流1.基本概念与作用1.1文字瀑布流简介1.2Canvas在动画中的作用2.示例一：基本的文字瀑布流实现代码解释3.示例二：增强版文字瀑布流新增功能4.示例三：互动版文字瀑布流新增功能5.示例四：使用WebWorkers进行优化工作线程文件`worker.js`新增功能6.不同角度的功能使用思路6.1自定义字符集6.2透明度变化6.3响应式设计7.实际工作中的技巧7.
  • ASM系列五 利用TreeApi 解析生成Class lijingyao8206 ASM字节码动态生成ClassNodeTreeAPI
       前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。          在介绍前，先要知道一点， Tree工程的接口基本可以完
  • 链表树——复合数据结构应用实例 bardo 数据结构树型结构表结构设计链表菜单排序
    我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 需求简介： 经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
  • 为啥要用位运算代替取模呢 chenchao051 位运算哈希汇编
        在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧，     JDK6中的HashMap中的indexFor方法： /** * Returns index for hash code h. */ static int indexFor(int h, int length) {
  • 最近的情况 麦田的设计者 生活感悟计划软考想
          今天是2015年4月27号      整理一下最近的思绪以及要完成的任务             1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为
  • PHP去掉字符串中最后一个字符的方法 IT独行者 PHP字符串
    今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： $str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr;
  • hadoop在linux上单机安装过程 _wy_ linuxhadoop
    1、安装JDK     jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行：    export JAVA_HOME=/usr/java/jdk1.7.0_25  
  • JAVA进阶----分布式事务的一种简单处理方法 无量 多系统交互分布式事务
    每个方法都是原子操作： 提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 A系统调用B,C,D系统完成分布式事务 =========执行开始======== A.aa(); try { B.bb(); } catch(Exception e) { A.rollbackAa(); } try { C.cc(); } catch(Excep
  • 安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉 矮蛋蛋 hadoop互联网
    　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 　　到底什么是移动DSP呢? 　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广
  • myelipse设置 alafqq IP
      在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 注释模板导入步骤  安装方法： 打开eclipse/myeclipse 选择 window-->Preferences-->JAVA-->Code-->Code
  • java数组 百合不是茶 java数组
    java数组的   声明  创建  初始化；   java支持C语言      数组中的每个数都有唯一的一个下标 一维数组的定义 声明： int[] a = new int[3];声明数组中有三个数int[3] int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数
  • javascript读取表单数据 bijian1013 JavaScript
    利用javascript读取表单数据，可以利用以下三种方法获取： 1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 2、通过表单名称属性：var b = document.getElementsByName("name"); 3、直接通过表单名字获取：var c = form.content.
  • 探索JUnit4扩展：使用Theory bijian1013 javaJUnitTheory
    理论机制（Theory） 一.为什么要引用理论机制（Theory）         当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 TDD 的优点：     &nb
  • [Spring Data Mongo一]Spring Mongo Template操作MongoDB bit1129 template
    什么是Spring Data Mongo Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 1. 封装客户端跟MongoDB的链接管理 2. 文档-对象映射，通过注解:@Document(collectio
  • 【Kafka八】Zookeeper上关于Kafka的配置信息 bit1129 zookeeper
    问题： 1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 4. Producer跟Zookeeper究竟有没有关系？没有关系！！！   //consumers、config、brokers、cont
  • java OOM内存异常的四种类型及异常与解决方案 ronin47 java OOM 内存异常
          　OOM异常的四种类型： 　　　 　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。     　  二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx
  • java-实现链表反转-递归和非递归实现 bylijinnan java
    20120422更新： 对链表中部分节点进行反转操作，这些节点相隔k个： 0->1->2->3->4->5->6->7->8->9 k=2 8->1->6->3->4->5->2->7->0->9 注意1 3 5 7 9 位置是不变的。 解法： 将链表拆成两部分： a.0-&
  • Netty源码学习-DelimiterBasedFrameDecoder bylijinnan javanetty
    看DelimiterBasedFrameDecoder的API，有举例： 接收到的ChannelBuffer如下： +--------------+ | ABC\nDEF\r\n | +--------------+ 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： +-----+----
  • linux的一些命令 -查看cc攻击-网口ip统计等 hotsunshine linux
    Linux判断CC攻击命令详解 2011年12月23日 ⁄ 安全 ⁄ 暂无评论 查看所有80端口的连接数 netstat -nat|grep -i '80'|wc -l 对连接的IP按连接数量进行排序 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看TCP连接状态 n
  • Spring获取SessionFactory ctrain sessionFactory
    String sql = "select sysdate from dual"; WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); String[] names = wac.getBeanDefinitionNames(); for(int i=0; i&
  • Hive几种导出数据方式 daizj hive数据导出
    Hive几种导出数据方式   1.拷贝文件   如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 hadoop fs –cp source_path target_path   2.导出到本地文件系统   --不能使用insert into local directory来导出数据，会报错 --只能使用
  • 编程之美 dcj3sjt126com 编程PHP重构
    我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解   header("Content-type: text/plain"); function static_function () { static $i = 0; if ($i++ < 1
  • Android保存用户名和密码 dcj3sjt126com android
    转自：http://www.2cto.com/kf/201401/272336.html 我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 1、通过普通 的txt文本存储 2、通过properties属性文件进行存
  • Oracle 复习笔记之同义词 eksliang Oracle 同义词Oracle synonym
    转载请出自出处：http://eksliang.iteye.com/blog/2098861 1.什么是同义词       同义词是现有模式对象的一个别名。       概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
  • Ajax案例 gongmeitao Ajaxjsp
    数据库采用Sql Server2005 项目名称为:Ajax_Demo 1.com.demo.conn包 package com.demo.conn; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; //获取数据库连接的类public class DBConnec
  • ASP.NET中Request.RawUrl、Request.Url的区别 hvt .netWebC#asp.nethovertree
      如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
  • SVG 教程 （七）SVG 实例，SVG 参考手册 天梯梦 svg
    SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中。 谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。   SVG 实例 SVG基本形状 一个圆 矩形 不透明矩形 一个矩形不透明2 一个带圆角矩
  • 事务管理 luyulong javaspring编程事务
    事物管理 spring事物的好处 为不同的事物API提供了一致的编程模型 支持声明式事务管理 提供比大多数事务API更简单更易于使用的编程式事务管理API 整合spring的各种数据访问抽象 TransactionDefinition 定义了事务策略 int getIsolationLevel()得到当前事务的隔离级别 READ_COMMITTED 
  • 基础数据结构和算法十一：Red-black binary search tree sunwinner AlgorithmRed-black
      The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
  • centos同步时间 stunizhengjia linux集群同步时间
    做了集群，时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o
  • ITeye 9月技术图书有奖试读获奖名单公布 ITeye管理员 ITeye
    ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：      《NFC：Arduino、Andro
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他