文档章节

HTML5 图片瀑布流布局

pengyaou
 pengyaou
发布于 2014/03/23 13:21
字数 424
阅读 723
收藏 11
先简短的说下原理,在给出源代码。
  • 瀑布流的元素块(div)宽度统一,高度不一致(随里面内容增加而增加)。

  • 瀑布流的元素块(div)Position属性为absolute或者relative,采用这2中布局方式是为了让元素块能够绝对定位。

  • 第一层高度是统一的,随后增加层数的时候以当前元素的上面的元素块高度为准,依次往下堆叠。

  • 在每放下一层的时候先放在上一层中高度最低的元素后面,依次递归

预览网址:http://www.pengyaou.com/ImageWall/

源代码(Javascript):
var tops=0;
var imgCount=0;//图片数目
var imgArray=new Array();//存放高度数组
var isChangeH=false;
var index=0;
var isShowTwo=false;
function GetImage(value){
        var Main_Wall_Item=$("#"+value+" > .Main_Wall_Item");
        var Main_Wall_ItemImg=$(".Main_Wall_Item >img");
        Main_Wall_ItemImg.click(function(){
                if(isChange==false){
                        isChange=true;
                var localHeight=$(this)[0].offsetHeight;
                var localParentHeight=$(this).parent()[0].offsetHeight;
                $(this).parent().css("z-index",112);
                $(this).animate({height: 500+"px",width: 500+"px"}, 600);
                $(this).parent().animate({height: 500+"px",width: 500+"px"}, 600);
                $(this).click(function(){$(this).parent().css("z-index",1);$(this).animate({height: localHeight+"px",width: 190+"px"}, 600);$(this).parent().animate({height: localParentHeight+"px",width: 220+"px"}, 600,function(){isChange=false});});
                }
        });
        var currentArray=new Array();
        imgCount=Main_Wall_Item.length;
        for(var i=0;i<=3;i++){
                i==0?Main_Wall_Item.style.marginLeft=20+"px":Main_Wall_Item.style.marginLeft=(i*220)+20*(i+1)+"px";
                imgArray=Main_Wall_Item.offsetHeight+20//;
                currentArray=Main_Wall_Item.offsetHeight+20//;
        }
        for(var i=4;i<imgCount;i++){
                currentArray.sort(function(a,b){return a>b?1:-1});
                var keyIndex=parseInt(getMinHeightKey(imgArray,currentArray[index]));
                Main_Wall_Item.style.marginLeft=keyIndex*220+20*(keyIndex+1)+"px";
                Main_Wall_Item.style.marginTop=imgArray[keyIndex]+"px";
                imgArray[keyIndex]+=Main_Wall_Item.offsetHeight+20;
                index++;
                if(index%4==0){
                        currentArray[0]=imgArray[3];
                        currentArray[1]=imgArray[2];
                        currentArray[2]=imgArray[1];
                        currentArray[3]=imgArray[0];
                        index=0;
                }
        }
        $(".Main_Wall_Item").animate({opacity: 1}, 1000);
        document.getElementById("Main_Wall_Live").style.marginTop=imgArray[0]+"px";
        document.getElementById("Main_Mark_Two").style.marginTop=imgArray[0]-10+"px";
        tops=imgArray[0];
}
//获取数组中高度最小的
function getMinHeightKey(arr,minH){ 
            for(key in arr){ 
                if(arr[key] == minH){ 
                    return key; 
                } 
            } 
        } 


© 著作权归作者所有

上一篇: HTML5 个人博客站
下一篇: HTML5 个人博客站
pengyaou
粉丝 13
博文 2
码字总数 564
作品 0
成都
私信 提问
18 个详细的响应式 Web 设计教程

在这篇文章中,我想跟你分享 18 个很有用的响应式 Web 设计的教程,这些教程可以帮助你学习响应式设计,包括瀑布流表格、图片和 media queries。 创建移动优先的响应式设计 使用 Sass 和 Co...

小编辑
2013/06/18
10.6K
5
10月22日HTML5直播公开课之京东完美瀑布流懒加载代码技术解析

今天扣丁学堂HTML5培训直播公开课给大家介绍一下关于京东完美瀑布流懒加载代码技术解析的详细介绍,希望对同学们学习HTML5开发有所帮助,下面我们一起来看一下吧。 腾讯课堂直播地址:https...

扣丁学堂
2018/10/22
0
0
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
642
0
精彩网站解析(HTML5+CSS3+Javascript如何实现华丽的动态效果)

在某个论坛看到一个非常详细的电影官网解析,拿来和大家分享一下,觉得有意思的可以看一下,或许对你的建站能提供很多启发(赠送网站地址:http://www.thehungergamesexplorer.com/ ) 看了《...

洋葱头大
2013/06/04
3.9K
2
分享 7 款超炫的 HTML5 Canvas 3D 动画效果

在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了。遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和saf...

yykj
2012/11/19
9.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
52分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
54分钟前
7
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
57分钟前
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
今天
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部