webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

MixItUp

www.kunkalabs.com


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>mixItUp3の練習</title>
<style>
html,body,h1,p {
  margin:0;
  padding:0;
}
img {
  vertical-align:bottom;
}
body {
  overflow-y: scroll;
}
.container {
  width:900px;
  margin:50px auto;
  overflow:hidden;
}
.container > div {
  width:300px;
  float:left;
}
button {
  margin-right:10px;
}
p {
  margin-bottom:20px;
}
</style>


</head>

<body>

<div class="container">
<p>
<button type="button" data-filter="all">All</button>
<button type="button" data-filter=".green">緑のボタン</button>
<button type="button" data-filter=".red">赤いボタン</button>
<button type="button" data-filter=".blue">青いボタン</button>
<button type="button" data-filter=".num" data-sort="order:asc">小さい方から</button>
<button type="button" data-filter=".num" data-sort="order:descending">大きい方から</button>
</p>
<div class="mix green num" data-order="1"><img src="img/01.jpg" alt=""></div>
<div class="mix green"><img src="img/02.jpg" alt=""></div>
<div class="mix green"><img src="img/03.jpg" alt=""></div>
<div class="mix red"><img src="img/04.jpg" alt=""></div>
<div class="mix red num" data-order="2"><img src="img/05.jpg" alt=""></div>
<div class="mix red"><img src="img/06.jpg" alt=""></div>
<div class="mix blue num" data-order="3"><img src="img/07.jpg" alt=""></div>
<div class="mix blue"><img src="img/08.jpg" alt=""></div>
<div class="mix blue"><img src="img/09.jpg" alt=""></div>
</div>

<script src="js/mixitup.js"></script>
<script>
            var containerEl = document.querySelector('.container');
            var mixer = mixitup(containerEl);
            function handleTargetClick(e) {
                var targetEl;
                if (!(targetEl = e.target).matches('.mix')) {
                    // If clicked element is not a target, return
                    return;
                }
                // Pass the reference to the target element to the remove method
                mixer.remove(targetEl);
            }
            containerEl.addEventListener('click', handleTargetClick);
        </script>
</body>
</html>