Изображения только в IE старых версий стоят неплотно друг другу. По цвету отображает как margin, но они все по нулям, но почему-то отступ все-равно есть...
п.с.: бордер нужен, не из-за него.
Полный код
<html>
<head>
<style>
#masonry{
background-color: #999;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.small img{
border: 2px solid #999;
float: left;
width: 150px;
height: 150px;
}
.small a:hover img{
border:2px solid #f00;
}
.small.hor img{
width: 150px;
height: 100px;
}
.small.ver img{
width: 100px;
height: 150px;
}
.small.square img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<div id="news"><div id='masonry'>
<?php
$query = "SELECT * FROM images WHERE type='main' AND location='studio';";
$result = $db->query($query);
while ($postrow[] = $db->fetch($result));
for ($i = 0; $i < count($postrow) - 1; $i++) {
if ( $postrow[$i]['size'] == "small") {
echo '<div class="small"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
}
if ( $postrow[$i]['size'] == "hor") {
echo '<div class="small hor"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
}
if ( $postrow[$i]['size'] == "ver") {
echo '<div class="small ver"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
}
if ( $postrow[$i]['size'] == "square") {
echo '<div class="small square"><a href="projectsshow.php?id=' . $postrow[$i]['project_id'] . '"><img src="img/'. $postrow[$i]['img'] .'" title="' . $postrow[$i]['description'] . '"></a></div>';
}
}
?>
</body>
<script src='js/masonry.pkgd.min.js'></script>
<script>
var container = document.querySelector('#masonry');
var msnry = new Masonry( container, {
columnWidth: 50,
smallSelector: '.small'
});
</script>
</html>
Простой
