갤러리 masonry grid 플러그인 이용하시는분들 계신가요?

http://masonry.desandro.com/

이용중인 플러그인

테스트페이지

공식 오피셜 레이아웃

http://sitelab.dothome.co.kr/xe/test

xe 에디션 레이아웃

http://sitelab.dothome.co.kr/xe/text2

1)

창크기에 따라 썸네일이 이동되는데,

에디션이나 아예 빈 레이아웃 {$content}만 들어가있는 레이아웃엔

잘 적용이되는데 오피셜 등 공식레이아웃이나 그외에 제가 제작한 레이아웃엔

아예 작동을 안하더라구요

현재 갤러리 소스는

<style>
.item {
float:left;
width:{$module_info->thumbnail_width}px;
height:{$module_info->thumbnail_height}px;

}
</style>

<load target="masonry.pkgd.js"/>

<div id="container">
<div class="item" loop="$document_list=>$no,$document">
<img class="gall_img" src="{$document->getThumbnail($module_info->thumbnail_width, $module_info->thumbnail_height, $module_info->thumbnail_type)}"/>
</div>
</div>
<script>
var container = document.querySelector( '#container' );
var msnry = new Masonry( container, {
// options
columnWidth: {$module_info->thumbnail_width},
itemSelector: '.item',
 } );
 </script>

이렇게 되어있는데요, 스크립트가 div 가장 밑 아니면 또 모두 작동을 안하구요,

어떤식으로 스크립트를 넣어야 모두 작동할까요.. 안되는 이유를 모르겠어요ㅠㅠ

그리구

2)

썸네일이 width크기는 일정하고 height는 동일하게 아니고 자동으로 나왔으면 하는데

http://www.kristianhammerstad.com/

이런형태로요 height 값을 빼버리면 아예 썸네일이 안나오거나 픽셀이 깨지듯 나와서..ㅠㅠ

이부분은 어떤식으로 조정해야할까요