砌体未正确显示项目

Question

我正在使用砌体jquery插件在容器中排列一些图像，该插件似乎正在工作，但未正确显示项目。 有可以由项目填充的空间，但项目是“浮动”在下一行的左侧，这不应该发生。

可以在这里看到问题： http : //riley87.co.uk/theme/ionic/portfolio-masonry.html

这是代码：

<ul class="col full-width masonry-wrap filter-wrap">
    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x520-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x520-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x520-1.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x520-1.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-3.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-3.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x520-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x520-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x520-2.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x520-2.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-3.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-3.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 49.9099099099%;">                    
        <a href="img/portfolio/554x259-4.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/554x259-4.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>

    <li class="item web" style="width: 24.8648648649%;">                    
        <a href="img/portfolio/276x259-4.jpg"  class="img-wrap view" rel="photography">
            <img src="img/portfolio/276x259-4.jpg" alt="">
            <div class="img-overlay">
                <div class="icon-only"><i class="fa fa-eye"></i></div>
            </div>
        </a>
    </li>
</ul>

<script>
    $(document).ready(function(){
        var container = document.querySelector('.masonry-wrap');
        var msnry = new Masonry( container, {
          // options
          itemSelector: '.item'
        });
        var msnry;
        // initialize Masonry after all images have loaded
        imagesLoaded( container, function() {
          msnry = new Masonry( container );
        });
    });
</script>

Answer 1

首先，您需要删除msnry冗余声明，并保留一旦加载图像即被触发的声明。

其次，在设置砖石对象时，尝试将.item选择器定义为columnWidth选项：

$(document).ready(function(){
  var $container = $('.masonry-wrap');
  // initialize Masonry after all images have loaded
  $container.imagesLoaded(function() {
    $container.masonry({
      itemSelector: '.item',
      columnWidth: '.item'
    });
  });
});