也是圖片縮成一團而且都縮到第一列的問題。
function waterfall(){
var $parent=$('#main');
var $box=$('#main>.box');
var $boxWidth=$box.eq(0).outerWidth();
var cols=Math.floor($(window).width()/$boxWidth);
? ? $parent.css({
? ? 'width':$boxWidth*cols+'px',
? ? 'margin':'0 auto'
? ? });
?
? ? var arr=[];
? ? $box.each(function(index,element){
? ? var boxHeight=$box.eq(index).outerHeight();
? ? if(index<cols){
? ? ? ? ?arr.push(boxHeight);
? ? }else{
? ? ? ? ? ? var minH=Math.min.apply(null,arr);
? ? ? ? ? ? var minHIndex=$.inArray(minH,arr);
? ? ? ? ? ? console.log(minHIndex);
? ? ? ? ? // 這里打印出來的minHIndex是0,而且刷新會變。
? ? ? ? ? ? $(element).css({
? ? ? ? ? ? 'position':'absolute',
? ? ? ? ? ? 'top':minH+'px',
? ? ? ? ? ? 'left':$box.eq(minHIndex).position().left+'px'
? ? ? ? ? ? });
? ? ? ? ? ? //arr[minHIndex]+=$box.eq(index).outerHeight();
? ? }
? ? });
第二列以后的圖片會縮成一團,而且打印出來最小高度的索引是0,一直刷新的話還會變。
2016-09-01
arr.push(boxHeight); ? ????
2016-07-06
是不是你把arr[minHIndex]+=$box.eq(index).outerHeight();注釋了的原因,不注釋它就行了吧