问答详情
源自:2-5 onscroll事件实现瀑布流布局的图片加载功能

这个有bug啊,把浏览器窗口缩小时滚动式正常的,但是放大后就会有重叠现象出现了,怎么解决呢

这个有bug啊,把浏览器窗口缩小时滚动式正常的,但是放大后就会有重叠现象出现了,怎么解决呢

提问者:满满肥肉的夏天 2016-06-09 11:17

个回答

  • 哲_1996
    2016-06-09 17:34:21
    已采纳

    缩放页面并且滚动时会执行waterfall函数,此时clientWidth发生变化,所以列数num也会发生变化;如果是缩小,那么原来在第一行的元素会被挤到下面,变成绝对定位,页面重排;放大的话,num变大,原来在第二列的元素是绝对定位,不会回到第一排,所以部分i<num的aPin[i]仍在第二排,而在for循环中

    for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素
            var pinH=aPin[i].offsetHeight;
            if(i<num){
                pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr
            }else{
                var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH
                var minHIndex=getminHIndex(pinHArr,minH);
                aPin[i].style.position='absolute';//设置绝对位移
                aPin[i].style.top=minH+'px';
                aPin[i].style.left=aPin[minHIndex].offsetLeft+'px';
                //数组 最小高元素的高 + 添加上的aPin[i]块框高
                pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
            }

    会把i<num的aPin[i]当成第一排,导致页面出现错误。

    可以在for循环前面加一个

    for(var j = 0; j < num ;j++){
        aPin[j].style.position="";
        }

    清除掉i<num的aPin[i]的绝对定位,就ok了。

  • 慕侠3572466
    2017-05-31 20:29:35

    把var cols=Math.floor(document.documentElement.clientWidth/OboxW);改成

    var cols=Math.floor(document.documentElement.scrollWidth/OboxW);就好了