벽돌 블록과 같은 가장 간단한 스크립트

Question

벽돌과 같은 코드를 준비합니다. 각 요소

가

위치 요소에 대한 나의 스크립트는 다음과 같은 동일한 폭 (온로드)가 - 항상 4 열 - :

var line = 0; 
var row = 0; 
var heights = []; 

// Count elements on one line 
$('img').each(function() { 
    if ($(this).prev().length > 0) { 
     if ($(this).position().top != $(this).prev().position().top) { 
      return false; 
     } 

     line++; 
    } else { 
     line++; 
    } 
}); 

for (i = 0; i < $('img').length; i++) { 
    if (i % line == 0 && i > 0) { 
     row++; 
    } 

    // Set position in first row 
    $('img:eq(' + i + ')').css({ 
     'position': 'absolute', 
     'top': '0px', 
     'left': $('img:first').outerWidth(true) * i 
    }); 

    // Set position for next rows 
    if (row > 0) { 
     $('img:eq(' + i + ')').css({ 
      'top': parseFloat($('img:eq(' + (i - line) + ')').offset().top + $('img:eq(' + (i - line) + ')').outerHeight(true) - $('img:first').offset().top), 
      'left': parseFloat($('img:eq(' + (i - line) + ')').css('left')) 
     }); 
    } 
} 

을 그리고에 요소를 제거하는 기능을

규칙은 간단합니다 클릭

$('img').on('click', function() { 
    $('img').css({ 
     'transition': 'all 3s' 
    }); 

    $(this).remove(); 

    $(window).trigger('load');  
}); 

나는 두 가지 질문 묻고 싶다 :

를

1. div 래퍼의 높이를 설정하는 방법은 무엇입니까?
2. 왜 요소를 제거하면 ( 클릭) 요소가 올바르게 배치되지 않습니다. 방아쇠로 다시 메서드를 실행합니다. jsfiddle에

모든 코드 : http://jsfiddle.net/n8v3X/3/

Answer 1

(1) DIV 못해 그 아이들 위치 절대 요소이므로 높이가 스크립트를 통해 설정 될 수 있고, 높이를 얻는다.

> > 큰 높이를 가지고 DIV를 감싸도록 설정 화상되는 열 찾기 각 열에

> > 계산 총 IMG 높이

/* Logic to Calculate Height */ 
var wrap_height = 0; 
var column_array = [0, 0, 0, 0]; 
for (i = 0; i <= row; i++) { 
    var temp_height = 0; 
    for (j = 0; j < line; j++) { 
     //curr element in a row : j+ (i * line); 
     var curr_height = $('img:eq(' + (j + (i * line)) + ')').outerHeight(true); 

     column_array[j % line] += curr_height; 

    } 
} 
for (i = 0; i < column_array.length; i++) { 
    if (column_array[i] > wrap_height) { 
     wrap_height = column_array[i]; 
    } 
} 

$('#wrap').css({ 
    height: wrap_height + 'px' 
}); 

(B)를 적절하게 위치하지 때문에

이전 요소의 새 위치는 루프에서 제대로 계산할 수 없습니다.

$ ('img : eq ('+ (i- line) + ')') >> 상단 & 왼쪽 값은 아래 코드에서 얻으므로 은 새 위치로 설정됩니다.

if (row > 0) { 
      $('img:eq(' + i + ')').css({ 
       'top': parseFloat($('img:eq(' + (i - line) + ')').offset().top + $('img:eq(' + (i - line) + ')').outerHeight(true) - $('img:first').offset().top), 
       'left': parseFloat($('img:eq(' + (i - line) + ')').css('left')) 
      }); 
     } 
    } 

이 문제를 해결하기 위해 html5의 데이터 속성을 사용했습니다.

바이올린 : http://jsfiddle.net/aslancods/n8v3X/152/

Answer 2

당신은 절대 위치 요소가 레이아웃에되지 않기 때문에 래퍼의 높이를 계산해야합니다. 그들은 그들 자신의 레이아웃 컨텍스트를 가지고 있습니다.

동일한 가로 위치에있는 하위 요소의 높이를 더하고 거기에서 상위 래퍼의 높이를 설정하십시오.

또한 요소가 제거되면 전체 스택의 위치를 ​​다시 계산해야합니다. Fiddle Demo

은 기본적으로는 "position:absolute;"가 아닌 다른 접근 방식 :

Answer 3

여기 내 이동이다. 이제는 한 항목으로 쉽게 작업을 수행 할 수 있으므로 해당 항목의 모든 항목이 그에 따라 이동하고 페이지의 이미지를 다시 정렬하려면 "spreadImages()"메서드를 호출 할 수 있으므로보다 유연한 레이아웃이 제공됩니다 . JS는 각 열 (float:left;)에 대한 실제 요소를 만들고 내부에 이미지는 모두 display:block;입니다.

CSS

div.column { 
    width:100px; 
    padding:10px 5px 0px; 
    float:left; 
    border:solid 1px red; 
} 
div.column img { 
    display:block; 
    margin-bottom:10px; 
    width:100%; 
} 

JS

$(function() { 
    var images, 
     columns, 
     numOfColumns = 4, 
     container = $('#container'); 

    // create rows 
    var createColumns = function() { 
     for (var i = 0; i < numOfColumns; i++) { 
      $('<div />').attr('id', 'row_' + i) 
         .addClass('column') 
         .appendTo(container); 
     } 
     columns = $('.column', container); 
    }; 

    // empty rows 
    var resetColumns = function(){ columns.html(''); }; 

    // returns the shortest column at the moment 
    var getShortestColumn = function() { 
     var shortestColumn; 
     columns.each(function() { 
      if (!shortestColumn) { 
       shortestColumn = $(this); 
      } else if ($(this).outerHeight() < shortestColumn.outerHeight()) shortestColumn = $(this); 
     }); 
     return shortestColumn; 
    }; 

    // spread images between rows 
    var spreadImages = function() { 
     images = $('img'); 
     resetColumns(); 
     images.each(function() { 
      var img = $(this); 
      var height = img.outerHeight(); 
      var shortestColumn = getShortestColumn(); 
      shortestColumn.append(img); 
     }); 
    }; 

    var init = function(){ 
     createColumns(); 
     spreadImages(); 
    }; 
    init(); 
    container.on('click', 'img', function(){ 
     var img = $(this); 
     img.animate({height:0, opacity:0}, function(){ 
      img.remove(); 
      spreadImages(); 
     }); 
    }); 
});