瀑布流的拓展

Posted 2020-08-22

效果：在页面中的一块区域内随机显示一坨图片，然后通过动画分散成瀑布流布局的效果

html与前面的一样，css去掉box的float属性即可

思路就是先通过绝对定位排好第一排，然后根据瀑布流布局的思路排下去即可。

$(window).on(‘load‘,function () {
    beginShow();
    firstLine();
    waterFall();

})
//产生范围随机数
function random(n,m){
    var c = m-n+1;
    return Math.floor(Math.random() * c + n);
}

//照片墙中心显示
function beginShow(){
    var $boxs = $(‘#main>div‘);
    //循环每个div，并在页面中随机展示
    $boxs.each(function (index,value) {
        var w = random($(window).width()/2-200,$(window).width()/2+200)-400;
        var h = random(200,600)+200;
        $(value).css({
            ‘position‘: ‘absolute‘,
            ‘top‘: w + ‘px‘,
            ‘left‘: h + ‘px‘
        })

    })
}
//移动照片，构造第一行照片
function firstLine() {
    var $boxs = $(‘#main>div‘);   //获取box
    var photoWidth = $boxs.eq(0).outerWidth();//获取照片宽度
    var photoNum =Math.floor( $(window).width() / photoWidth ); //得到列数
 //   $(window).click(function () {
        //点击后排布照片墙
        // $boxs.eq(0).animate({
        //     ‘top‘:‘10px‘,
        //     ‘left‘:‘20px‘
        // },2000);
        var w = ($(window).width()-photoNum*photoWidth)/2;
        $boxs.each(function (index,value) {
            if(index < photoNum){
                $boxs.eq(index).animate({
                    ‘top‘:‘10px‘,
                    ‘left‘:w + ‘px‘
                },4000)
                w += photoWidth;
            }
        })
  //  });
}
//根据第一排，瀑布布局
function waterFall(){
    var $boxs = $(‘#main>div‘);   //获取box
    var photoWidth = $boxs.eq(0).outerWidth();//获取照片宽度
    var photoNum =Math.floor( $(window).width() / photoWidth ); //得到列数
   // $(‘#main‘).width(photoNum * photoWidth).css(‘margin‘,‘auto‘);

    var hArr = [];
    $boxs.each(function (index , value) {
        var h = $boxs.eq(index).outerHeight(); // 取每张照片的高度
        if(index < photoNum){
            hArr[index] = h;//给第一排照片的高度赋值
        }else{
            var minH = Math.min.apply(null,hArr);//数组中最短的元素
            var minHindex = $.inArray(minH,hArr); //最短照片的高度
            var m = ($(window).width()-photoNum*photoWidth)/2;//照片居中后两边的留白宽度
            $(value).animate({
                ‘position‘:‘absolute‘,
                ‘top‘:minH + ‘px‘,
                ‘left‘:minHindex*photoWidth+m + ‘px‘
            },4000)
            hArr[minHindex] += $boxs.eq(index).outerHeight(); //改变高度，重新获取最短照片的位置
        }

    })
}
    

View Code