砌體網格佈局中的圖片互相重疊

我遵循了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

砌體網格佈局中的圖片互相重疊

回答

相關問題