DyLay는 Pinterest 스타일의 레이아웃을 구현하는 jQuery 플러그인이다.
여러 종류의 플러그인 중에서 특히 사용하기에 수월하고 불필요한 기능이 없어서 간편하고 좋다. 무엇보다 처음에 선택한 이유는 IE7을 지원하기 때문이었는데, 뒤늦게 찾아보니 Old Version인 v1.1에서만 지원하는 것 같았다.

아무튼 이미 최신 버전을 설치했고, IE8 이하에서도 지원가능하도록 수정하는데에 필요한 내용을 기록한다.

DyLay.js - 애니메이션 삭제

자바스크립트 실행 함수의 위치에 따라 각 요소들이 제대로 자리잡지 못한 채 로딩이 끝나버릴 때가 있다.
적절한 위치를 찾을 수도 있지만, 그다지 아름답지 못한 애니메이션을 가지고 있을 필요가 없을 것 같아 삭제하기로 했다.
DyLa.js의 Before를 After와 같이 수정.

//Before
$i.stop().animate({
    left : x,
    top : h - $ih
}, this.opts.speed, this.opts.easing);

//After
$i.css('top', h - $ih);
$i.css('left', x);</pre>

DyLay.js - IE8 이하 미지원 함수 수정

var $i = is.eq(i),
    _r = $i[0].getBoundingClientRect(),
    $iw = Math.floor(_r.width),
    $ih = Math.floor(_r.height),
    x = 0,
    j = 0,
    h = Infinity,
    _h = h,
    k,
    _w,
    _k;

getBoundingClientRect 함수가 IE8이하에서 width값과 height값이 Undefined로 출력된다.
위 내용 바로 아래에 아래 내용을 추가한다.

/* _r.height가 Undefined일 경우 width값과 height값 다시 계산 */
if(_r.height === undefined){
    $iw = _r.right - _r.left;
    $ih = _r.bottom - _r.top;
}

CSS 작성시 유의사항

#dylay { margin: 0; padding: 0; list-style: none; }
#dylay li { float: left; margin: 2px; border-radius: 5px; padding: 2px 5px; font-size: 10px; }

IE7에서 ul인 #dylay의 width 속성값을 불러오지 못한다.
#delay에 width: 100%;를 추가한다.