index.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <link href="../reset.css" rel="stylesheet"/>
  6. <link href="./style.css" rel="stylesheet"/>
  7. <title>MixItUp Demo - Basic (IE8 Compatible Layout)</title>
  8. </head>
  9. <body>
  10. <div class="controls">
  11. <button type="button" class="control" data-filter="all"></button>
  12. <button type="button" class="control" data-filter=".green"></button>
  13. <button type="button" class="control" data-filter=".blue"></button>
  14. <button type="button" class="control" data-filter=".pink"></button>
  15. <button type="button" class="control" data-filter="none"></button>
  16. <button type="button" class="control" data-sort="default:asc">Asc</button>
  17. <button type="button" class="control" data-sort="default:desc">Desc</button>
  18. </div>
  19. <div class="container">
  20. <div class="mix green"></div>
  21. <div class="mix green"></div>
  22. <div class="mix blue"></div>
  23. <div class="mix pink"></div>
  24. <div class="mix green"></div>
  25. <div class="mix blue"></div>
  26. <div class="mix pink"></div>
  27. <div class="mix blue"></div>
  28. <div class="gap"></div>
  29. <div class="gap"></div>
  30. <div class="gap"></div>
  31. </div>
  32. <script src="../mixitup.min.js"></script>
  33. <script>
  34. var containerEl = document.querySelector('.container');
  35. var mixer = mixitup(containerEl);
  36. </script>
  37. </body>
  38. </html>