与砌体的图像选择器

Question

我正在尝试将Image-picker与Masonry合并，但我遇到了一些问题。

我的javascript是

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() {
    $("#image_picker").imagepicker();

    var msnry = new Masonry( '#container', {
      itemSelector: '.item',
    });
  });

我的HTML是

<div id="container js-masonry">
  <select multiple="multiple" class="image-picker masonry" id="image_picker">
    <div class="item"><option data-img-src="http://image_1.jpg">Img_1</option></div>
    <div class="item"><option data-img-src="http://image_2.jpg">Ime_2</option></div>
  </select>
</div>

结果显示图像选择器工作正常，但似乎Masonry不起作用。

第一行和第二行图像之间有一个巨大的空白。

是否有任何人有经验可以帮助我解决它。

非常感谢。

---

Answer 1

有类似的问题..这个链接有帮助。 http://jsfiddle.net/huanlin/mgvrc/

var $container = $('.image_picker_selector');
// initialize
$container.imagesLoaded(function () {
    $container.masonry({
        columnWidth: 30,
        itemSelector: '.thumbnail'
    });
});

你将不得不使用imagesLoaded插件..这样你加载图像后应用砌体。 http://imagesloaded.desandro.com/