文档章节

一个简单的瀑布流

kongjun
 kongjun
发布于 2015/06/04 15:09
字数 388
阅读 28
收藏 1

今天研究了一下淘宝提供的瀑布流的案例,大致的思路有点了解了,但还寻在一个bug,就是如果图片加载在js加载之后话,会出现图片重叠,因为U站里不支持window对象,所以可以利用window.onload解决。滚动条加载的大致思路:先得到top最低的那个div,然后依次在后面动态加载。先总结这么多,以后再回过研究看看。

var $id = function(o){
    return DOM.query("." + o)[0];
};
var warpWidth = 220; //格子宽度
var margin = 14; //格子间距
function sort(el, childTagName){
    var h = []; //记录每列的高度
    var box = el.getElementsByTagName(childTagName);
    var minH = box[0].offsetHeight;
    var boxW = box[0].offsetWidth + margin;
    
    var n = 950 / boxW | 0; //计算页面能排下多少Pin
    el.style.width = n * boxW - margin + "px";
    DOM.addClass(el, "isVisble");
    for (var i = 0; i < box.length; i++) {//排序算法,有待完善
        var boxh = box[i].offsetHeight; //获取每个Pin的高度
        if (i < n) { //第一行特殊处理
            h[i] = boxh;
            box[i].style.top = 0 + 'px';
            box[i].style.left = (i * boxW) + 'px';
        }
        else {
            minH = Array.min(h); //取得各列累计高度最低的一列
            var minKey = getarraykey(h, minH);
            h[minKey] += boxh + margin; //加上新高度后更新高度值
            box[i].style.top = minH + margin + 'px';
            box[i].style.left = (minKey * boxW) + 'px';
        }
        var maxH = Array.max(h);
        var maxKey = getarraykey(h, maxH);
        el.style.height = h[maxKey] + "px";//定位结束后更新容器高度
    }
    for (var i = 0; i < box.length; i++) {
        DOM.addClass(box[i], "isVisble");
    }
}

Array.min = function(array){
    return Math.min.apply(Math, array);
}
Array.max = function(array){
    return Math.max.apply(Math, array);
}
/* 返回数组中某一值的对应项数*/
function getarraykey(s, v){
    var k = null;
    for (k in s) {
        if (s[k] == v) {
            return k;
        }
    }
}
sort($id("wrap"), "div");


© 著作权归作者所有

共有 人打赏支持
kongjun
粉丝 8
博文 98
码字总数 40811
作品 0
杭州
程序员
私信 提问
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0
iOS开发-UICollectionView实现瀑布流

关于瀑布流的实现网上有很多种解法,自定义控件,TableView+ScrollView,UICollectionView是iOS6发布之后用于展示集合视图,算起来已经发布三年左右了,不过知识点是不变的,集合视图提供了一...

Daniel_s
2015/12/09
92
0
响应式布局页面之瀑布流布局浅析

瀑布流式布局(简称瀑布流)最先在网站上应用 Pinterest (貌似是最早使用这种布局的网站了),Mark之,蘑菇街,点点网等页面都采用了这种布局。那么什么是瀑布流呢?瀑布流的好处在哪? 瀑布流...

H_J
2014/03/14
0
0
Android端实现多人音视频聊天应用(二):实现多人通话

作者:声网用户,资深Android工程师吴东洋 本系列文章分享了基于Agora SDK 2.1实现多人视频通话的实践经验。 在上一篇《Android 多人视频聊天应用的开发(一)一对一聊天》中我们学习了如何使...

agora
2018/08/27
0
0
Android端实现多人音视频聊天应用(二):多人视频通话

作者:声网用户,资深Android工程师吴东洋 本系列文章分享了基于Agora SDK 2.1实现多人视频通话的实践经验。 在上一篇《Android 多人视频聊天应用的开发(一)一对一聊天》中我们学习了如何使...

Agora
2018/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【PG内核】事务ID冷冻简述

数据库代码中事务ID的类型TransactionId定义为:typedef uint32 TransactionId。因此事务ID最大值为2^32-1=4294967295。 事务ID是需要循环使用的,为了做到这一点,数据库在做vacuum时将很老...

movead
22分钟前
13
0
深入学习SpringMVC以及学习总结

一、优点: 1.SpringMVC简化web程序开发; 2.SpringMVC效率很好(单例模式); 3.SpringMVC提供了大量扩展点,方便程序员自定义功能; 如果想学习Java工程化、高性能及分布式、深入浅出。微服...

编程SHA
22分钟前
1
0
关于开源分布式事务中间件Fescar,我们总结了开发者关心的13个问题

开源分布式事务中间件 Fescar 自1月10日上线v0.1版本以来,受到了开发者们的极大关注(watch249,star3005,fork649,社区讨论的issue58,数据统计于1月17日14:00),可见,天下苦分布式事务...

阿里云官方博客
23分钟前
1
0
斯皮格尔:我们敢于采纳非常疯狂的创意

“阅后即焚”照片分享应用 Snapchat 母公司 Snap 的 CEO 埃文-斯皮格尔(Evan Spiegel)近日接受了英国《金融时报》记者的采访,谈到了该公司的未来发展,与社交网络 Facebook 的竞争,限制自己...

linuxCool
24分钟前
1
0
javaweb文件上传以及文件上传成功后但是目录中没有显示

经过看别人写的代码然后自己实际操作一遍,基本都是搬运也是为了练习。1:创建fileUpLoad.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UT......

小橙子的曼曼
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部