砌体网格布局中的图片互相重叠

我遵循了getting started masonry上的所有步骤，但我的结果完全不同。我希望它看起来像这样：http://iam.beyonce.com/tagged/my_work。但看上去，你可以看到完全不同的：https://jsfiddle.net/saitam/tfomnuqs/砌体网格布局中的图片互相重叠

下面是一个例子代码：

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

<body> 

<div class="grid"> 

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

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

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


</div> 

</body>

提前任何帮助，非常感谢。

来源

2017-04-05 saitam

试试这个代码给出图像

.brightness img { 
    max-width: 100%; 
}

var $grid = $('.grid').masonry({ 
 
    itemSelector: '.grid-item', 
 
    percentPosition: true, 
 
    columnWidth: '.grid-sizer' 
 
});

* { 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%; 
 
} 
 

 
.grid-item { 
 
    float: left; 
 
} 
 

 
.grid-item img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 

 

 
/* masonry */ 
 
.grid-item { 
 
    border: 2px solid hsla(0, 0%, 0%, 0.5); 
 
} 
 

 

 
.brightness img:hover { 
 
    opacity: .5; 
 
} 
 
.brightness img { 
 
    max-width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js"></script> 
 
<div class="grid"> 
 
    <div class="grid-sizer"></div> 
 
    <div class="grid-item"> 
 
    <a href="#"> 
 
     <div class="brightness"> 
 
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> 
 
    </div></a> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <a href="#"> 
 
     <div class="brightness"> 
 
<img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> 
 
</div></a> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <a href="#"> 
 
     <div class="brightness"> 
 
<img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> 
 
</div></a> 
 
    </div> 
 
    
 
    <div class="grid-item"> 
 
    <a href="#"> 
 
     <div class="brightness"> 
 
    <img src="https://images.pexels.com/photos/99551/hot-air-balloon-valley-sky-99551.jpeg" alt="..."> 
 
    </div></a> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <a href="#"> 
 
     <div class="brightness"> 
 
<img src="https://images.pexels.com/photos/147504/pexels-photo-147504.jpeg" alt="..."> 
 
</div></a> 
 
    </div> 
 
    <div class="grid-item"> 
 
    <a href="#"> 
 
     <div class="brightness"> 
 
<img src="https://images.pexels.com/photos/271560/pexels-photo-271560.jpeg" alt="..."> 
 
</div></a> 
 
    </div> 
 
</div>

来源

2017-04-05 08:09:57 Amal

这适用于鼠标悬停，但网格本身仍然是一个烂摊子 – saitam

请看我更新的代码宽度为100％ ..give不同的高度图像它会很好 – Amal

谢谢，我已经修复它的方式:-) – saitam

砌体网格布局中的图片互相重叠

回答

相关问题