美文网首页
基于浮动的移动端两列可延时加载的瀑布流布局

基于浮动的移动端两列可延时加载的瀑布流布局

作者: 醉笑红尘中 | 来源:发表于2017-08-02 21:39 被阅读0次

    几点说明

    1.本文所说的瀑布流指的是等宽不等高的瀑布流

    2.本文使用的方法可以使用图片延时加载而不会影响瀑布流效果

    延时加载瀑布流实现的主要问题

    主要的问题在于延时与图片高度计算的冲突,延时加载完成前后图片的高度是会发生变化的,瀑布流函数计算的每列高度不一定准确,定位会出现问题。笔者先尝试过使用绝对定位实现瀑布流布局,但是因为延时加载问题,出来的效果并不是很理想,也尝试过使用onload事件来触发瀑布流函数,但是不知道具体什么原因定位还是不准确。所以为了尽快完成工作任务,使用了本文的这个方式,思想基本相同,只是定位元素位置的方式是使用浮动。因此也局限了瀑布流的列数只能是两列,应对移动端应该是够用了。

    瀑布流的几种实现方式

    1.绝对定位实现,通过JS计算每一列的高度,然后通过绝对定位来实现每个元素位置的排列以实现瀑布流的形式。

    2.将屏幕分成等宽的若干列,每一列都是一个容器,通过计算每个容器的高度,将元素放在高度最低的容器中。

    3.使用CSS3的多列布局,这个方法个人认为实现起来比较简单,但是有一个问题,重新加载的内容是页面右侧,而不是在页面下方。想要用这种方法的去百度一下CSS3实现瀑布流网上有很多实例。

    本文实现的代码

    JS代码如下:

    function water(){            var arrBox=$('#content').children('.box');//box对象            var arrBoxH=[];//数组,用于存储左侧列中的所有块框相加的高度            var arrBoxR=[];//数组,用于存储右侧列中的所有块框相加的高度for(var i=0;i rightNum) //比较两侧高度大小,决定为该box添加左浮动还是右浮动                    {                        arrBox.eq(i).removeClass();                        arrBox.eq(i).addClass("box right");//左侧较高为该box添加右浮动                        arrBoxR[i]=boxH;//将高度添加在右侧数组                    }else{                        arrBox.eq(i).removeClass();                        arrBox.eq(i).addClass("box left");//右侧较高为该box添加左浮动                        arrBoxH[i]=boxH;//将高度添加在左侧数组                    }                }            }        }

    html代码+css代码

    *{margin:0;padding:0;}#content{position:relative;margin:0auto;}.box{width:50%;float:left;}.boximg{width:100%;height:auto;display:block;}.left{float:left;}.right{float:right;}

    相关文章

      网友评论

          本文标题:基于浮动的移动端两列可延时加载的瀑布流布局

          本文链接:https://www.haomeiwen.com/subject/tjoylxtx.html