Skip to content

Instantly share code, notes, and snippets.

@Wonicon
Created September 23, 2017 07:27
Show Gist options
  • Save Wonicon/63f6d0b6c03bab70c7e8c1926ceb2675 to your computer and use it in GitHub Desktop.
Save Wonicon/63f6d0b6c03bab70c7e8c1926ceb2675 to your computer and use it in GitHub Desktop.
Masonry Demo
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" >
<script src="masonry.pkgd.js"></script>
</head>
<body>
<div class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 250 }'>
<?
$dir = scandir('Phone');
$dir = array_filter($dir, function($item) {
return !is_dir($item);
});
foreach ($dir as $img) {
$img = mb_convert_encoding($img, 'UTF-8', 'CP936');
?>
<div class="grid-item">
<img src="Phone/<?=$img?>" />
</div>
<?
}
?>
</div>
</body>
</html>
.grid-item {
width: 250px;
}
img {
display: block;
width: 100%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment