我个人非常喜欢js+css的强大表现能力,这也是我喜欢前端开发的原因之一,后端通常都是在和数据打交道,很多东西都是抽象的数据结构,不直观也不美观,而前端着重于界面视图的渲染以及各种各样有意思的交互效果,其中像我们在客户端中见到的安装进度条效果以及滑块拖动效果,使用js+css都能够在页面中进行模拟,并且方法也并不复杂.我这里进行了简单的效果实现,记录一下以作巩固.
1.进度条效果实现
基本思想：
这里主要使用了CSS3的animation动画效果,将进度条设置为一个初始宽度为0,背景色为绿色,高度与容器相同的元素,通过animation对其宽度进行动画过渡,以实现进度条填充的效果.
以下为代码实现，可以作为参考：
&!--外层容器--&
&div id="wrapper"&
&!--进度条容器--&
&div id="progressbar"&
&!--用来模仿进度条推进效果的进度条元素--&
&div id="fill"&&/div&
position: relative;
width:200px;
height:100px;
border:1px solid darkgray;
#progressbar{
position: absolute;
margin-left:-90px;
margin-top:-10px;
width:180px;
height:20px;
border:1px solid darkgray;
/*在进度条元素上调用动画*/
animation: move 2s;
text-align: center;
background-color: #6caf00;
/*实现元素宽度的过渡动画效果*/
@keyframes move {
width:100%;
var progressbar={
init:function(){
var fill=document.getElementById('fill');
var count=0;
//通过间隔定时器实现百分比文字效果,通过计算CSS动画持续时间进行间隔设置
var timer=setInterval(function(e){
fill.innerHTML=count+'%';
if(count===100) clearInterval(timer);
progressbar.init();
HTML5下的实现：
强大的HTML5提供了一种新的标签&progress&,只需要通过该标签+简单的js，即可以实现进度条滚动的效果。
代码如下：
&progress max="100" value="0" id="pg"&&/progress&
&这个标签意义很明确，并且属性只有以上两个，max表示需要完成的任务量，value是目前完成的任务量。
var pg=document.getElementById('pg');
setInterval(function(e){
if(pg.value!=100) pg.value++;
else pg.value=0;
以上的实现方式不仅更加的语义化，同时也极大的简化了我们的代码，并且灵活性更高，所以熟练使用HTML5是非常有必要的！
不过HTML5标签的浏览器兼容性也是我们需要考虑的一个问题，所以如果网页需求的兼容性比较高的话，特别是对低版本IE有兼容需求的话，那么HTML5的标签就不太适用了。以下为&progress&的浏览器支持情况。
2.滑动条效果实现
基本思想：
滑动条其实就是进度条的进阶,进度条是自动填充整个容器,滑动条是实现可自己控制的填充效果.
整个滑动条主要分为三个部分,即滑动条容器,滑块,填充块.
在这里我主要实现了两个功能:
1.点击滑动条的任意部分,自动调整滑块位置并调整填充情况
2.拖拽滑块进行填充调整
第一个功能的实现非常的简单,首先将滑块设置成绝对定位,然后只需要在滑动条区域内绑定click事件,然后读取鼠标事件的offsetX属性,确定鼠标位置相对于滑动条左侧的距离,然后设置滑块的left来调整滑块位置以及填充块的宽度.
第二个功能的实现稍微复杂一点,因为要模拟一个拖拽的效果,这里使用到了三个鼠标事件mousedown,mousemove,mouseup.
1.当我们按住滑块时,触发mousedown事件,在这个事件处理里面我们不需要做太多的事情,只需要修改一个状态,将滑块从不允许拖拽的状态变成允许拖拽.
2.然后触发mousemove,让滑块和填充块跟随鼠标移动.
3.当释放鼠标时,触发mouseup事件,将滑块从允许拖拽的状态变成不允许拖拽.
以下为代码实现，可以作为参考：
&!--外层容器--&
&div id="wrapper"&
&!--填充块--&
&div id="fill"&&/div&
&!--滑块--&
&div id="slider"&&/div&
position: relative;
width:200px;
height:20px;
border:1px solid darkgray;
/*将滑块和填充块设置成inline-block,保证他们在同一行内*/
position: absolute;
width:20px;
height:20px;
display: inline-block;
background-color: #af58a8;
cursor:pointer;
display: inline-block;
height:20px;
background: #6caf00;
var slider=(function(){
init=function(){
var wrapper=document.getElementById('wrapper');
var slider=document.getElementById('slider');
var fill=document.getElementById('fill');
move(wrapper,slider,fill);
move=function(dom1,dom2,dom3){
//drag用来存储滑块允许拖拽和不允许拖拽的状态
var drag=0;
//在滑动条上绑定click事件以实现点击任意位置,自动调整滑块和填充块的效果
dom1.addEventListener('click',function (e) {
if(e.target===dom2){
//点击滑块自身不做任何事情
if(e.offsetX&180) {
dom2.style.left='180px';
dom3.style.width='180px';
}else if(e.offsetX&20){
dom2.style.left='0px';
dom3.style.width='0px';
dom2.style.left=e.offsetX-10+'px';
dom3.style.width=e.offsetX-10+'px';
//修改drag的状态
dom2.addEventListener('mousedown',function(){
//释放按钮绑定在document上,保证在整个页面容器里面任何地方松开按钮都能修改drag的状态
document.addEventListener('mouseup',function(){
// 使滑块和填充块跟随移动,这里使用的pageX,需要计算和视窗左侧的距离而不是和滑动块左侧的距离
dom1.addEventListener('mousemove',function(e){
if(drag==1){
if(e.pageX&189) {
dom2.style.left='180px';
dom3.style.width='180px';
}else if(e.pageX&29){
dom2.style.left='0px';
dom3.style.width='0px';
dom2.style.left=e.pageX-19+'px';
dom3.style.width=e.pageX-19+'px';
slider.init();
HTML5下的实现：
既然进度条在HTML5下有了专门的标签，那么滑动条呢？经过查询发现，虽然没有设置滑动条的标签，但是HTML5在input的type属性中新增了一个值range，正是我们需要的滑动条。可见input并不局限于提供输入框，它能够实现的控件非常的丰富，有很多控件都是可以在input中找到的。
该控件效果如下：
代码如下：
&input type="range" name="points" min="1" max="10" /&
甚至都不需要JS来控制，只需要一行html代码，即可实现完整的滑动条效果。
该属性具体的使用教程参考如下：
range属性的使用方法：
js中对range元素如何进行操作：
阅读(...) 评论()css绝对定位如何在不同分辨率下的电脑正常显示定位位置？
时间： 19:19:18
&&&& 阅读：1092
&&&& 评论：
&&&& 收藏：0
标签：&&&&&&&&&&&&&&&有时候我们在写页面中，会发现绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，似乎父级的相对定位并没有起了作用。首先要明白如下几个原理：1、笔记本电脑的分辨率一般为附近，PC电脑的分辨率一般为 ；以下为常见电脑分辨率：&当写网页时，如果在1920这样的大分辨率写好之后，再去小分辨率的笔记本看同样的这个网页，会发现，笔记本电脑显示的基本为宽屏大显示器下网页放大至1.5倍左右的展示效果。2、为了页面在不同的分辨率下正常显示，要给页面一个安全宽度，一般在做1920px宽的页面时，中间要有一个1200px左右的安全宽度，并且居中，所有的内容要写在这个宽度的box里，如果有背景图或者轮播图必须通栏整个页面的时候，一定要设置成居中对齐，这样当分辨率降低之后，背景图或者Banner图左右、中间1200宽度的盒子依然居中对齐，不会出现向左向右偏离。盒子里的div等小盒子可以用百分比来表示，来达到页面自适应。&绝对定位的使用：&&&& &&绝对定位的时候，该元素的父元素一定要记得设为相对定位，这样在不同分辨率下定位才不会错乱，但是前提是这个父元素在一个安全的宽度里面，如果这个父元素本身是一个会因为分辨率降低而改变的元素，则定位一定会跟着乱。在布局页面结构的时候，一些box框架是必不可少的，比如1200px安全宽度的div。例如：做一个活动页面，其中这个页面背景为一个大图，在这个大图上要放一些小图来与大图实现定位，绝对不能以大图直接作为背景！而是在放大图背景的div里继续放一个安全宽度div，再把它作为父元素做相对定位，给里面的子元素做绝对定位，这样就不会出现不同分辨率下绝对定位错乱的问题了。&通过总结网友经验，通过加zoom属性，可以让页面某个区块根据分辨率不同进行自动缩放到合适区域，但是有个bug，就是火狐浏览器打死都不支持这个属性，即使用transform：scale(x,y);属性也于事无补。还有一个小问题，在页面加载慢的时候重新刷新页面会先显示放大的效果，再变为缩小后的效果，会闪一下，这个还没找到解决办法，希望懂的朋友们多多交流。zoom代码如下：&&$(function(){&&&&&&&&
&&&&&var&w=window.screen.&&&&&&&&
&&&&&var&zoom=w/1920;2&&&&&&&&&
&&&&&$("#container").css({&&&&&&&
&&&&&&&&&"zoom",zoom,&&&&&&&&
&&&&&&&&&"-moz-transform":"scale("+zoom+")",
&&&&&&&&&"-moz-transform-origin":"top&left"5&&&&&&&&&
});zoom:当前屏幕分辨率宽度/1920;zoom属性的浏览器支持性：&结果是：除了firefox以外，其他浏览器可以正常支持zoom属性，并且页面需要缩放的区块整体缩放到了适应当前分辨率的效果，而transform：scale 则是先把页面显示为已经把原本页面放大后再使用scale，则该缩小相当于当前页面下缩小的效果了，两边自然会留白。PS：我觉得zoom属性蛮好用的，怎么现在都不怎么用了呢，居然firefox还不支持，而且很难找到解决办法。所以只能好好改变自己代码结构，提高代码的严谨性了，写出高效高兼容的代码，是每一个前端义不容辞的责任。【注：该文章整合网友意见与经验总结所得】本文出自 “” 博客，请务必保留此出处标签：&&&&&&&&&&&&&&&原文地址：http://beileixinqing.blog.51cto.com/6191
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"& &html xmlns="http://www.w3.org/1999/xhtml"& &head& &title&css重叠元素的交叉重叠与绝对定位的实现&/title& &style& .sun{
position:
width:150
height:100
background:#000000;
z-index:10
} .index1{
top:50
left:50
background:#333333;
z-index:2;
} .index2{
position:
top:100
left:100
background:#666666;
z-index:-1;
} .index3{
top:150
left:150
background:#999999;
z-index:1;
} div{
position:
width:200
height:150
&/style& &/head& &body&
&div class="index1"&&/div&
&div class="index2"&&/div&
&div class="index3"&
&div class="sun"&&/div&&/div& &/body& &/html& &br&&br&&br&&br&&br&&br&&br&&br&&hr& &p align="center"&本特效由 &a href="http://www.daimajiayuan.com" target="_blank"&代码家园&/a&丨 收集于互联网，只为兴趣与学习交流，不作商业用途。来源：源码爱好者&/p&
提示：可以先修改部分代码后再运行让绝对定位的元素水平居中对齐
让绝对定位的元素水平居中对齐
这种方式非常独特，大家一定要记牢这种方式
position:/*绝对定位*/
height:300
background:
margin:0/*水平居中*/
left:0;/*此处不能省略，且为0*/
right:0;/*此处不能省略，且为0*/javascript自适应宽度的瀑布流实现思路
转载 &更新时间：日 14:22:04 & 作者：
这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了，ajax和json是滚动加载更多内容的时候用到的，感兴趣的你可以参考下哦
这样的布局并不陌生，从2011年Pinterest创立以来，中国互联网就迅速掀起了一股模仿Pinterest的热潮，国内有众多网站采用瀑布流的布局方式，例如花瓣网、美丽说等等。而事实上在中国互联网，模仿一些在国外被人看好的模式（当然，你也可以说是山寨或抄袭，呵呵！！）向来都是一个不错的idea。
OK，现在进入正题。这里主要介绍瀑布流的一种实现方法：绝对定位(css)+javascript+ajax+json。简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了，ajax和json是滚动加载更多内容的时候用到的。
下面是实现思路：
1、计算页面的宽度，计算出页面可放数据块的列数（如上图所示就有6列）。
2、将各个数据块的高度尺寸记入数组中（需要等所有图片加载完成，否则无法知道图片的高度）。
3、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。
4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。
5、当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放（列数随页面宽度而改变，因而需要重新排放）。
6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。
思路有了，然后就是如何用代码实现。当然，如果看完以上的6个步骤你已经知道如何实现，那么下面的内容大可不必细看。
首先在页面上写好基本的HTML和CSS（为方便起见，CSS就不外联了），代码如下： 代码如下:&!DOCTYPE html& &html& &head& &meta http-equiv="Content-Type" content="text/ charset=UTF-8"& &title&瀑布流布局&/title& &style type="text/css"& body{margin:0; font-family:微软雅黑;} #flow-box{margin:10px auto 0 padding:0; position:relative} #flow-box li{ width:190 position: padding:10 border:solid 1px # list-style: opacity:0; -moz-opacity:0; filter:alpha(opacity=0); -webkit-transition:opacity 500ms ease-in- -moz-transition:opacity 500ms ease-in- -o-transition:opaicty 500ms ease-in- transition:opaicty 500ms ease-in-} #flow-box li img{width:100%;} #flow-box li a{display: width:100%; text-align: font-size:14 color:#333; line-height:18 margin-top:10 text-decoration:} .loadwrap{position: left:0; width:100%; text-align:} &/style& &/head& &body& &ul id="flow-box"& &li&&img src="http://www.mitxiong.com/NewsImages/4156.jpg" /&&a href="#"&图片标题1&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/1731.jpg" /&&a href="#"&图片标题2&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/2944.jpg" /&&a href="#"&图片标题3&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/1232.jpg" /&&a href="#"&图片标题4&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/9529.jpg" /&&a href="#"&图片标题5&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/6955.jpg" /&&a href="#"&图片标题6&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/6582.jpg" /&&a href="#"&图片标题7&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/2719.jpg" /&&a href="#"&图片标题8&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/9065.jpg" /&&a href="#"&图片标题9&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/7254.jpg" /&&a href="#"&图片标题10&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/2403.jpg" /&&a href="#"&图片标题11&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/7304.jpg" /&&a href="#"&图片标题12&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/8259.jpg" /&&a href="#"&图片标题13&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/8799.jpg" /&&a href="#"&图片标题14&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/4455.jpg" /&&a href="#"&图片标题15&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/4314.jpg" /&&a href="#"&图片标题16&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/8259.jpg" /&&a href="#"&图片标题17&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/5684.jpg" /&&a href="#"&图片标题18&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/5236.jpg" /&&a href="#"&图片标题19&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/6980.jpg" /&&a href="#"&图片标题20&/a&&/li& &/ul& &div id="loadimg" class="loadwrap"&&img src="Images/load.jpg" /&&/div& &/body& &/html&以上代码非常简单，可以看出页面最初将会先加载20个数据块。值得一提的是在CSS里面定义了opacity为0，目的是在数据块未排放好之前先隐藏起来，排放好后再将opacity设为1显示出来，另外这里用了css3的transition做一点体验上的升级；还有一点就是可以看到页面底部有一个id为“loading”的DIV，用来表示数据正在加载中。下面开始用JS实现以上思路（6个步骤）。
1、计算页面的宽度，计算出页面可放数据块的列数 代码如下:&script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 var w = document.documentElement.offsetW//计算页面宽度 var ul = document.getElementById("flow-box"); var li = ul.getElementsByTagName("li"); var iw = li[0].offsetWidth +//计算数据块的宽度 var c = Math.floor(w / iw);//计算列数 ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中 } &/script&注释写得非常明白，这一步不说应该都很容易懂。
2、将各个数据块的高度尺寸记入数组中 代码如下:&script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 //... 省略上一步的部份代码 ... ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中 var liLen = li. var lenArr = []; for (var i = 0; i & liL i++) {//遍历每一个数据块将高度记入数组 lenArr.push(li[i].offsetHeight); } } &/script&由于数据块里面含有图片，也没有给定图片的尺寸，所以需要等待图片加载完成后方可获取其高度；那么可以在window.onload的时候调用flow方法。代码变成： 代码如下:&script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 //... 省略上一步的部份代码 ... ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中 var liLen = li. var lenArr = []; for (var i = 0; i & liL i++) {//遍历每一个数据块将高度记入数组 lenArr.push(li[i].offsetHeight); } } //图片加载完成后执行 window.onload = function() {flow(10, 10)}; &/script&3、用绝对定位先将页面第一行填满，因为第一行的top位置都是一样的，然后用数组记录每一列的总高度。 代码如下:&script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 //... 省略上一步的部份代码 ... for (var i = 0; i & liL i++) {//遍历每一个数据块将高度记入数组 lenArr.push(li[i].offsetHeight); } var oArr = []; for (var i = 0; i & i++) {//把第一行排放好，并将每一列的高度记入数据oArr li[i].style.top = "0"; li[i].style.left = iw * i + "px"; li[i].style.opacity = "1"; li[i].style["-moz-opacity"] = "1"; li[i].style["filter"] = "alpha(opacity=100)"; oArr.push(lenArr[i]); } document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面 } //图片加载完成后执行 window.onload = function() {flow(10, 10)}; //获取数字数组的最大值 function _getMaxValue(arr) { var a = arr[0]; for (var k in arr) { if (arr[k] & a) { a = arr[k]; } }
} &/script&截至目前为止，可以到浏览器里面预览一下效果：
OK，接下来开始放置其他的数据块了，也就是到思路的第4步了。
4、继续用绝对定位将其他数据块定位在最短的一列的位置之后然后更新该列的高度。 代码如下:&script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 //... 省略上一步的部份代码 ... for (var i = 0; i & i++) {//把第一行排放好，并将每一列的高度记入数据oArr li[i].style.top = "0"; li[i].style.left = iw * i + "px"; li[i].style.opacity = "1"; li[i].style["-moz-opacity"] = "1"; li[i].style["filter"] = "alpha(opacity=100)"; oArr.push(lenArr[i]); } for (var i = i & liL i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度 var x = _getMinKey(oArr);//获取最短的一列的索引值 li[i].style.top = oArr[x] + mv + "px"; li[i].style.left = iw * x + "px"; li[i].style.opacity = "1"; li[i].style["-moz-opacity"] = "1"; li[i].style["filter"] = "alpha(opacity=100)"; oArr[x] = lenArr[i] + oArr[x] +//更新该列的高度 } document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面 } //图片加载完成后执行 window.onload = function() {flow(10, 10)}; //获取数字数组的最大值 function _getMaxValue(arr) { //... 省略部份代码 ... } //获取数字数组最小值的索引 function _getMinKey(arr) { var a = arr[0]; var b = 0; for (var k in arr) { if (arr[k] & a) { a = arr[k]; b = } }
} &/script&到这一步可以到浏览器里面再看一次效果，可以说整个瀑布流的雏形都出来了：
5、当浏览器窗口大小改变时，重新执行一次上面1-4步以重新排放
这一步操作起来也相当便捷，在改变窗口大小时，再执行一次flow方法即可 代码如下:&script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 //... 省略部份代码 ... //图片加载完成后执行 window.onload = function() {flow(10, 10)}; //改变窗口大小时重新布局
window.onresize = function() { clearTimeout(re); re = setTimeout(function() {flow(10, 10);}, 200); } //获取数字数组的最大值 function _getMaxValue(arr) { //... 省略部份代码 ... } //获取数字数组最小值的索引 function _getMinKey(arr) { //... 省略部分代码 ... } &/script&这里值得注意的便是setTimeout，由于onresize的触发频率非常高，用setTimout设定一个间隔时间可以减低flow方法的执行频率，降低性能损耗。
6、滚动条滚动到底部时加载新的数据进来后也是定位在最短的一列的位置之后然后更新该列的高度。 代码如下:&script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 //... 省略部份代码 ... document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面 function scroll() {//滚动加载数据 var st = oArr[_getMinKey(oArr)]; var scrollTop = document.documentElement.scrollTop & document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollT if (scrollTop &= st - document.documentElement.clientHeight) { window.onscroll =//为防止重复执行，先清除事件 _request(null, "GetList.php", function(data) {//当滚动到达最短的一列的距离时便发送ajax请求新的数据，然后执行回调函数 _addItem(data.d, function() {//追加数据 var liLenNew = li. for(var i = liL i & liLenN i++) { lenArr.push(li[i].offsetHeight); } for(var i = liL i & liLenN i++) { var x = _getMinKey(oArr); li[i].style.top = oArr[x] + 10 + "px"; li[i].style.left = iw * x + "px"; li[i].style.opacity = "1"; li[i].style["-moz-opacity"] = "1"; li[i].style["filter"] = "alpha(opacity=100)"; oArr[x] = lenArr[i] + oArr[x] + 10; } document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//loading向下移位 liLen = liLenN window.onscroll =//执行完成，恢愎onscroll事件 }); }) } } window.onscroll = } //图片加载完成后执行 window.onload = function() {flow(10, 10)}; //... 省略部份代码 ... //追加项 function _addItem(arr, callback) { var _html = ""; var a = 0; var l = arr. (function loadimg() { var img = new Image(); img.onload = function() { a += 1; if (a == l) { for (var k in arr) { var img = new Image(); img.src = arr[k]. _html += '&li&&img src="' + arr[k].img + '" /&&a href="#"&' + arr[k].title + '&/a&&/li&'; } _appendhtml(document.getElementById("flow-box"), _html); callback(); } else { loadimg(); } } img.src = arr[a]. })() } //ajax请求 function _request(reqdata, url, callback) {
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var data = eval("(" + xmlhttp.responseText + ")"); callback(data); } } xmlhttp.open("POST", url); xmlhttp.setRequestHeader("Content-Type", "application/ charset=utf-8"); xmlhttp.send(reqdata); } //追加html function _appendhtml(parent, child) { if (typeof (child) == "string") { var div = document.createElement("div"); div.innerHTML = var frag = document.createDocumentFragment(); (function() { if (div.firstChild) { frag.appendChild(div.firstChild); arguments.callee(); } else { parent.appendChild(frag); } })(); } else { parent.appendChild(child); } } //获取数字数组的最大值 function _getMaxValue(arr) { //... 省略部份代码 ... } //获取数字数组最小值的索引 function _getMinKey(arr) { //... 省略部份代码 ... } &/script&这一步涉及的代码比较多，简单概括其实就是多了几个方法：scroll()、_addItem()、_request()、_appendhtml()。
主要是看scroll()。在这里_addItem()和_requeat()是供scroll()调用的，而_appendhtml()是供_addItem()调用的。
这一步的整个过程是：当页面滚动到最短的一列数据的底部时就发出ajax请求加载新的数据，然后待数据中的图片全部load完后就追加到页面上，然后将这些数据项的高度写入到数组lenArr中，并对新加入的这些数据项进行定位，按照每一项都放在最短列的后面的规则而排放在适当的位置上，最后再将loading图片向下移到最底部的位置。
总结以上的整个思路，有4个地方值得一说：
1、缩放浏览器窗口时，onresize的触发很频繁，为降低性能损耗，需要待缩放结束后再执行重排，以上思路是使用setTimeout来处理。
2、页面滚动到最下面加载新数据的时候，只需对新数据排列。
3、以上思路中加载新数据要等图片都加载完成后才知道其高度，但实际项目中最好是服务器能给定高度值。
4、滚动触发加载新数据时，要避免事件多次触发，以上思路是将onscroll事件置为空，加载完成后再将事件恢复。
最后附上完整的代码：flow.html 代码如下:&&!DOCTYPE html& &html& &head& &meta http-equiv="Content-Type" content="text/ charset=UTF-8"& &title&瀑布流布局&/title& &style type="text/css"& body{margin:0; font-family:微软雅黑;} #flow-box{margin:10px auto 0 padding:0; position:relative} #flow-box li{ width:190 position: padding:10 border:solid 1px # list-style: opacity:0; -moz-opacity:0; filter:alpha(opacity=0); -webkit-transition:opacity 500ms ease-in- -moz-transition:opacity 500ms ease-in- -o-transition:opaicty 500ms ease-in- transition:opaicty 500ms ease-in-} #flow-box li img{width:100%;} #flow-box li a{display: width:100%; text-align: font-size:14 color:#333; line-height:18 margin-top:10 text-decoration:} .loadwrap{position: left:0; width:100%; text-align:} &/style& &/head& &body& &ul id="flow-box"& &li&&img src="http://www.mitxiong.com/NewsImages/4156.jpg" /&&a href="#"&图片标题1&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/1731.jpg" /&&a href="#"&图片标题2&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/2944.jpg" /&&a href="#"&图片标题3&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/1232.jpg" /&&a href="#"&图片标题4&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/9529.jpg" /&&a href="#"&图片标题5&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/6955.jpg" /&&a href="#"&图片标题6&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/6582.jpg" /&&a href="#"&图片标题7&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/2719.jpg" /&&a href="#"&图片标题8&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/9065.jpg" /&&a href="#"&图片标题9&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/7254.jpg" /&&a href="#"&图片标题10&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/2403.jpg" /&&a href="#"&图片标题11&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/7304.jpg" /&&a href="#"&图片标题12&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/8259.jpg" /&&a href="#"&图片标题13&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/8799.jpg" /&&a href="#"&图片标题14&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/4455.jpg" /&&a href="#"&图片标题15&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/4314.jpg" /&&a href="#"&图片标题16&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/8259.jpg" /&&a href="#"&图片标题17&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/5684.jpg" /&&a href="#"&图片标题18&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/5236.jpg" /&&a href="#"&图片标题19&/a&&/li& &li&&img src="http://www.mitxiong.com/NewsImages/6980.jpg" /&&a href="#"&图片标题20&/a&&/li& &/ul& &div id="loadimg" class="loadwrap"&&img src="Images/load.jpg" /&&/div& &script type="text/javascript"& function flow(mh, mv) {//参数mh和mv是定义数据块之间的间距，mh是水平距离，mv是垂直距离 var w = document.documentElement.offsetW//计算页面宽度 var ul = document.getElementById("flow-box"); var li = ul.getElementsByTagName("li"); var iw = li[0].offsetWidth +//计算数据块的宽度 var c = Math.floor(w / iw);//计算列数 ul.style.width = iw * c - mh + "px";//设置ul的宽度至适合便可以利用css定义的margin把所有内容居中 var liLen = li. var lenArr = []; for (var i = 0; i & liL i++) {//遍历每一个数据块将高度记入数组 lenArr.push(li[i].offsetHeight); } var oArr = []; for (var i = 0; i & i++) {//把第一行排放好，并将每一列的高度记入数据oArr li[i].style.top = "0"; li[i].style.left = iw * i + "px"; li[i].style.opacity = "1"; li[i].style["-moz-opacity"] = "1"; li[i].style["filter"] = "alpha(opacity=100)"; oArr.push(lenArr[i]); } for (var i = i & liL i++) {//将其他数据块定位到最短的一列后面，然后再更新该列的高度 var x = _getMinKey(oArr);//获取最短的一列的索引值 li[i].style.top = oArr[x] + mv + "px"; li[i].style.left = iw * x + "px"; li[i].style.opacity = "1"; li[i].style["-moz-opacity"] = "1"; li[i].style["filter"] = "alpha(opacity=100)"; oArr[x] = lenArr[i] + oArr[x] +//更新该列的高度 } document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//将loading移到下面 function scroll() {//滚动加载数据 var st = oArr[_getMinKey(oArr)]; var scrollTop = document.documentElement.scrollTop & document.body.scrollTop? document.documentElement.scrollTop : document.body.scrollT if (scrollTop &= st - document.documentElement.clientHeight) { window.onscroll =//为防止重复执行，先清除事件 _request(null, "GetList.php", function(data) {//当滚动到达最短的一列的距离时便发送ajax请求新的数据，然后执行回调函数 _addItem(data.d, function() {//追加数据 var liLenNew = li. for(var i = liL i & liLenN i++) { lenArr.push(li[i].offsetHeight); } for(var i = liL i & liLenN i++) { var x = _getMinKey(oArr); li[i].style.top = oArr[x] + 10 + "px"; li[i].style.left = iw * x + "px"; li[i].style.opacity = "1"; li[i].style["-moz-opacity"] = "1"; li[i].style["filter"] = "alpha(opacity=100)"; oArr[x] = lenArr[i] + oArr[x] + 10; } document.getElementById("loadimg").style.top = _getMaxValue(oArr) + 50 + "px";//loading向下移位 liLen = liLenN window.onscroll =//执行完成，恢愎onscroll事件 }); }) } } window.onscroll = } //图片加载完成后执行 window.onload = function() {flow(10, 10)}; //改变窗口大小时重新布局
window.onresize = function() { clearTimeout(re); re = setTimeout(function() {flow(10, 10);}, 200); } //追加项 function _addItem(arr, callback) { var _html = ""; var a = 0; var l = arr. (function loadimg() { var img = new Image(); img.onload = function() { a += 1; if (a == l) { for (var k in arr) { var img = new Image(); img.src = arr[k]. _html += '&li&&img src="' + arr[k].img + '" /&&a href="#"&' + arr[k].title + '&/a&&/li&'; } _appendhtml(document.getElementById("flow-box"), _html); callback(); } else { loadimg(); } } img.src = arr[a]. })() } //ajax请求 function _request(reqdata, url, callback) {
if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var data = eval("(" + xmlhttp.responseText + ")"); callback(data); } } xmlhttp.open("POST", url); xmlhttp.setRequestHeader("Content-Type", "application/ charset=utf-8"); xmlhttp.send(reqdata); } //追加html function _appendhtml(parent, child) { if (typeof (child) == "string") { var div = document.createElement("div"); div.innerHTML = var frag = document.createDocumentFragment(); (function() { if (div.firstChild) { frag.appendChild(div.firstChild); arguments.callee(); } else { parent.appendChild(frag); } })(); } else { parent.appendChild(child); } } //获取数字数组的最大值 function _getMaxValue(arr) { var a = arr[0]; for (var k in arr) { if (arr[k] & a) { a = arr[k]; } }
} //获取数字数组最小值的索引 function _getMinKey(arr) { var a = arr[0]; var b = 0; for (var k in arr) { if (arr[k] & a) { a = arr[k]; b = } }
} &/script& &/body& &/html&GetList.php 代码如下:&&?php header("Content-Type:application/charset=utf-8"); echo('{"d": [ {"img": "http://www.mitxiong.com/NewsImages/4156.jpg", "title": "图片1"}, {"img": "http://www.mitxiong.com/NewsImages/1731.jpg", "title": "图片2"}, {"img": "http://www.mitxiong.com/NewsImages/2944.jpg", "title": "图片3"}, {"img": "http://www.mitxiong.com/NewsImages/1232.jpg", "title": "图片4"}, {"img": "http://www.mitxiong.com/NewsImages/9529.jpg", "title": "图片5"}, {"img": "http://www.mitxiong.com/NewsImages/6955.jpg", "title": "图片6"}, {"img": "http://www.mitxiong.com/NewsImages/6582.jpg", "title": "图片7"}, {"img": "http://www.mitxiong.com/NewsImages/2719.jpg", "title": "图片8"}, {"img": "http://www.mitxiong.com/NewsImages/9065.jpg", "title": "图片9"}, {"img": "http://www.mitxiong.com/NewsImages/7254.jpg", "title": "图片10"}, {"img": "http://www.mitxiong.com/NewsImages/2403.jpg", "title": "图片11"}, {"img": "http://www.mitxiong.com/NewsImages/7304.jpg", "title": "图片12"}, {"img": "http://www.mitxiong.com/NewsImages/8259.jpg", "title": "图片13"}, {"img": "http://www.mitxiong.com/NewsImages/8799.jpg", "title": "图片14"}, {"img": "http://www.mitxiong.com/NewsImages/4455.jpg", "title": "图片15"}, {"img": "http://www.mitxiong.com/NewsImages/4314.jpg", "title": "图片16"}, {"img": "http://www.mitxiong.com/NewsImages/8259.jpg", "title": "图片17"}, {"img": "http://www.mitxiong.com/NewsImages/5684.jpg", "title": "图片18"}, {"img": "http://www.mitxiong.com/NewsImages/5236.jpg", "title": "图片19"}, {"img": "http://www.mitxiong.com/NewsImages/6980.jpg", "title": "图片20"} ]}'); ?&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具
