当前位置:Gxlcms > html代码 > 瀑布流代码实现(绝对定位)_html/css_WEB-ITnose

瀑布流代码实现(绝对定位)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:22人阅读

瀑布流是页面展示中十分常见的一种布局方式,利用这种布局,网页会显得十分好看。瀑布流元素最大的特点是等宽不等高,下面我一步步来分析如何实现瀑布流。

1.首先,我们准备一些图片,以及把基础的html+css代码写好(因为这步很简单,所以我就直接贴代码了)。

  • 页面初始效果

pic1.png

  • 网页结构
    瀑布流
    pic1
    pic2
    pic3
    pic4
    pic5
    pic6
  • css
    *{margin: 0;padding: 0;}.container{position: relative;width: 1040px;margin: 0 auto;}.box{float: left;padding: 5px;font-size: 0;}.box-img img{width: 250px;}

2.实现瀑布流效果

原理:1.根据所设的宽度,获得每一行可以放几列(我的列子中是写死的,一行放4列);2.获取每个元素的高度,保存在数组中;3.从第一个元素依次设置每个元素的定位:   3.1 先获得这个元素该放在第几列(现有高度最小的列),通过下面的getMinHeightCol函数;   3.2 根据每列的宽以及每列的当前高度,设置元素的left,top值(当然也要设置position:absolute);   3.3 重新修改每列的当前高度(为了3.1获得最新的“高度最小的列”);
  • js代码(依赖jquery)
$(function(){    var elesHeight = [];//每个元素的宽度    var colsHeight = [0,0,0,0]; //每列元素现有的高度    $(".container .box").each(function(index,item){        var eleHeight = $(this).height();        elesHeight.push(eleHeight);    });    //依次摆放每一个元素    $(".container .box").each(function(index,item){        //获得该元素应该在第几列        var colShould = getMinHeightCol(colsHeight);        var tempTop = colsHeight[colShould];        var tempLeft = colShould*260;        $(this).css({"position":"absolute","top":tempTop+"px",left:tempLeft+"px"});        //同时将该列的高度加上当前新增元素的高度        colsHeight[colShould] += $(this).height();    });    //得到四列中高度最小的那一列    function getMinHeightCol(arr){        var minHeight = Math.min.apply(null, arr);        console.log("最小高度:"+minHeight);        for(var i in arr){            if(arr[i]==minHeight){                return i;            }        }        //默认第一列        return 0;    }});
  • 页面效果

pic2.png

上面只是简单的瀑布流实现,一个完整的瀑布流应该也具备下面的几个特点:

  • 列数根据页面宽度和每列的宽度自动计算得来;
  • 窗口大小改变时,重新计算元素布局的位置;
  • 解决——窗口大小快速变化时,会不断地触发事件,造成的大量的性能消耗。
    针对第三个问题的setTimeout解决方法:窗口变化之后开始计时,如果窗口还在变换则从新开始计时,窗口不再变化则延时(很短的时间)触发重排事件。var re;window.onresize = function() {  clearTimeout(re);  re = setTimeout(resize,100); };

剩余的优化,自己动手尝试吧~

人气教程排行