2017-04-05 51 views
1

我已经检查了所有关于这个主题的帖子,但没有一个解决方案为我工作。砌体正在留下几个空白

这是我网格的样子:

enter image description here

这里是jsfiddle这里是代码。 HTML:

<!-- jQuery --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<!-- Masonry --> 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
<link rel="stylesheet" href="css/style.css"> 


<!-- imagesLoaded --> 
<script 
src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"> 

// init Masonry 
var $grid = $('.grid').masonry({ 
    itemSelector: '.grid-item', 
    percentPosition: true, 
    columnWidth: '.grid-sizer' 
}); 
// layout Masonry after each image loads 
$grid.imagesLoaded().progress(function() { 
    $grid.masonry('layout'); 
}); 
</script> 


<!-- Bootstrap --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 


<body> 

    <div class="container"> 

     <div class="grid"> 

      <div class="grid-item"> 
       <img src="http://hiphopgoldenage.com/wp-content/uploads/2015/10/MellowManAce.jpg" alt="Mellow Man Ace"> 
      </div> 

      <div class="grid-item"> 
       <img src="https://pbs.twimg.com/media/C2O6p6ZWgAA67jA.jpg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="http://images1.mtv.com/uri/mgid:file:docroot:mtv.com:/shared/promoimages/bands/c/cypres_hill/photos/cr_rene_cervantes/flipbook/CH-0141.jpg?enlarge=false&matte=true&matteColor=black&quality=0.85" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://cdn-images-1.medium.com/max/600/1*VfCrfkNhTVwAxftgfebcog.jpeg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.genius.com/ace91b03cd16b6f3678660cd184af26a.500x323x1.jpg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> 
      </div> 

      <div class="grid-item"> 
       <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> 
      </div> 

     </div> 

CSS:

* { box-sizing: border-box; } 

/* force scrollbar */ 
html { overflow-y: scroll; } 
/* body { font-family: sans-serif; } */ 

/* ---- grid ---- */ 
.grid { 
    background: #DDD; 
} 

/* clear fix */ 
.grid:after { 
    content: ''; 
    display: block; 
    clear: both; 
} 

/* ---- .grid-item ---- */ 
.grid-sizer, 
.grid-item { 
    width: 33.333%; 
    float: left; 
} 
.grid-item img { 
    display: block; 
    max-width: 100%; 
} 

我在做什么拧?请帮帮我。 非常感谢提前!

+0

你的第一个问题是一个脚本标记不能同时具有src和内部文本。 http://stackoverflow.com/a/43240177/227299有你缺少的其他细节 –

回答

2

你需要把的JavaScript在它自己的script标签(没有src),你需要把你在$(document).ready()imagesLoaded()(或$(function(){}))使用jQuery,无需与你的布局作为指定columnWidth列宽在你的CSS中。

.grid { 
 
    background: #DDD; 
 
} 
 

 
.grid:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 

 
.grid-sizer, 
 
.grid-item { 
 
    width: 33.333%; 
 
    float: left; 
 
} 
 

 
.grid-item img { 
 
    display: block; 
 
    max-width: 100%; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/imagesloaded.pkgd.min.js"></script> 
 
<script> 
 
    $(function() { 
 
    var $grid = $('.grid').masonry({ 
 
     itemSelector: '.grid-item', 
 
     percentPosition: true, 
 
    }); 
 
    $grid.imagesLoaded().progress(function() { 
 
     $grid.masonry('layout'); 
 
    }); 
 
    }); 
 
</script> 
 

 
<div class="grid"> 
 
    <div class="grid-item"> 
 
    <img src="http://hiphopgoldenage.com/wp-content/uploads/2015/10/MellowManAce.jpg" alt="Mellow Man Ace"> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://pbs.twimg.com/media/C2O6p6ZWgAA67jA.jpg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="http://images1.mtv.com/uri/mgid:file:docroot:mtv.com:/shared/promoimages/bands/c/cypres_hill/photos/cr_rene_cervantes/flipbook/CH-0141.jpg?enlarge=false&matte=true&matteColor=black&quality=0.85" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://cdn-images-1.medium.com/max/600/1*VfCrfkNhTVwAxftgfebcog.jpeg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.genius.com/ace91b03cd16b6f3678660cd184af26a.500x323x1.jpg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> 
 
    </div> 
 
</div>

+0

非常感谢! – saitam

+0

@saitam欢迎:) –

0

使用真正的宽度值,所以如果你想自动得到它(因为你是百分比)刚刚获得电网项目宽度做的正确方法。

这是一个办法做到:

$('.grid').masonry({ 
    // options 
    itemSelector: '.grid-item', 
    columnWidth: $(".grid-item").width() 
}); 

实例运行:https://jsfiddle.net/hqLj5t55/