0

我正在使用 masonry 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>
4

1 回答 1

0

首先，您需要删除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'
    });
  });
});
于 2014-07-19T17:53:02.143 回答