大神看看这是为什么

来源:3-1 jQuery实现瀑布流布局图片定位

殇苡迦箬

2016-05-29 21:19

http://img.mukewang.com/574aebda00019bf802100313.jpg图片都在第一张图片那儿叠加了,找了半天没找出问题,求大神指导一下

$(window).on('load',function(){

waterfall();

})


function waterfall(){

var $boxs=$('#main>div');

// var w=$boxs.eq(0).width();

var w=$boxs.eq(0).outerWidth();

var cols=Math.floor($(window).width()/w);//列数

$('#main').width(w*cols).css('margin','0 auto');

var hArr=[];

$boxs.each(function(index,value){

// console.log(index); console.log(value);

var h=$boxs.eq(index).outerHeight;

if(index<cols){

hArr[index]=h;

}else{

var minH=Math.min.apply(null,hArr);//???

var minHIndex=$.inArray(minH,hArr);//???

// console.log(varlue);

$(value).css({//dom对象转为jquery对象

'position':'absolute',

'top':minH+'px',

'left':minHIndex*w+'px'

})

hArr[minHIndex]+=$boxs.eq(index).outerHeight;

}


})

// console.log(hArr);

}


写回答 关注

1回答

  • Oooooooh
    2016-05-30 22:02:04
    已采纳

    var h=$boxs.eq(index).outerHeight();

    殇苡迦箬

    已经解决了 还是谢谢你

    2016-06-02 20:20:04

    共 1 条回复 >

瀑布流布局

瀑布流布局是网站比较流行的一种布局方式,教你实现三大方式

97759 学习 · 736 问题

查看课程

相似问题