section.hero.is-light.is-medium
div.hero-body
div.container
h1.title Testing Masonry - Cascading grid layout library
h2.subtitle
a(href="https://www.instagram.com/dan10gc/?hl=en") Images by Daniel Gonzalez
div.hero-foot
nav.tabs.is-boxed.is-fullwidth
div.container
ul#buttonGroup
li.is-active
a#all All Images
li
a#newYork New York City
li
a#flowers Flowers
li
a#others Other
div.grid#container
div.grid-sizer
div.grid-item.flowers
img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/sunFlowerNJ.jpg' alt='')
div.grid-item.flowers
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowers.jpg")
div.grid-item.newYork
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/AmericanStandardBuilding.jpg")
div.grid-item.newYork
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/nycGalaxy.jpg")
div.grid-item.flowers
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/butterflyOnFlower.jpg")
div.grid-item.newYork
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/nycBuilding2.jpg")
div.grid-item.newYork
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/falafelPost.jpg")
div.grid-item.newYork
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/littleRedLightHouse.jpg")
div.grid-item.flowers
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/gwFlowerB%26W.jpg")
div.grid-item.others
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/highwayExposure2.jpg")
div.grid-item.flowers
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowerWithButterfly.jpg")
div.grid-item.flowers
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowerWithBee.jpg")
div.grid-item.newYork
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/oilTankerHudson.jpg")
div.grid-item.flowers
img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/flowersCloseUp2.jpg' alt='')
div.grid-item.others
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/redMillB%26W.jpg")
div.grid-item.newYork
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/commuteToWork.jpg")
div.grid-item.others
img(src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/miamiNeonSign.jpg")
div.grid-item.flowers
img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/redFlowerBleachBypass.jpg' alt='')
div.grid-item.newYork
img(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/1362379/wrGraceBuilding.jpg')
View Compiled
$black: #333333;
* {
box-sizing: border-box;
}
.grid{
background: $black;
}
.grid:after {
content: '';
display: block;
clear: both;
}
.grid-sizer,
.grid-item {
width: 33.33%;
}
.grid-item{
float: left;
&:hover{
cursor:pointer;
}
}
.grid-item img{
display: block;
max-width: 100%;
border: 10px solid white;
@media screen and (max-width: 414px){
border: 5px solid white;
}
}
.grid-item.grid-item__expanded {
width: 66.66%;
z-index: 2;
}
View Compiled
var grid = document.querySelector('.grid');
var msnry;
// element selectors
var imgAll = document.querySelectorAll('.grid-item');
var imgNy = document.querySelectorAll('.newYork');
var imgFlowers = document.querySelectorAll('.flowers');
var imgOthers = document.querySelectorAll('.others');
// buttons
const tabsUl = document.getElementById('buttonGroup');
const lis = tabsUl.children;
const gridItems = grid.children;
imagesLoaded(grid, function(){
msnry = new Masonry( grid, {
//options
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
percentPosition: true
});
});
//element & class name
function toggleClass(parentElem, childElems, className){
for(let i = 0; i <childElems.length; i++){
if(childElems[i]==parentElem){
childElems[i].classList.add(className);
}
else{
childElems[i].classList.remove(className);
}
}
}
function showImages(showImg, hideImg1, hideImg2){
for(let i = 0; i < showImg.length; i++){
showImg[i].style.display = "block";
}
for(let i = 0; i < hideImg1.length; i++){
hideImg1[i].style.display = "none";
}
for(let i = 0; i< hideImg2.length; i++){
hideImg2[i].style.display = "none";
}
}
tabsUl.addEventListener('click', (event) =>{
let tabLi = event.target.parentNode;
toggleClass(tabLi, lis, 'is-active');
//show all images
if(event.target.id == "all"){
for(let i = 0; i< imgAll.length; i++){
imgAll[i].style.display = "block";
}
}
//show ny images
if(event.target.id == "newYork"){
showImages(imgNy, imgFlowers, imgOthers);
}
// show flowers
if(event.target.id == "flowers"){
showImages(imgFlowers, imgNy, imgOthers);
}
// show other images
if(event.target.id == "others"){
showImages(imgOthers, imgFlowers, imgNy);
}
msnry.layout();
});
grid.addEventListener('click',function(event){
let imgContainer = event.target.parentNode;
toggleClass(imgContainer, gridItems, 'grid-item__expanded');
msnry.layout();
});