Creating a Masonry Portfolio with Filterable Content Using Javascript

by

Creating a Masonry Portfolio with filterable content is a popular technique for showcasing projects, artwork, or products on a website. Using JavaScript, you can make your portfolio dynamic and user-friendly, allowing visitors to filter content based on categories or tags.

Understanding Masonry Layout

The Masonry layout arranges items in a grid with variable heights, similar to a brick wall. This layout is visually appealing and makes efficient use of space. JavaScript libraries like Masonry.js or Isotope.js simplify creating such layouts.

Setting Up Your HTML Structure

Start with a container for your portfolio items and filter buttons. Each item should have classes or data attributes indicating its category.

Example HTML structure:

<div class="filter-buttons">
  <button data-filter="*" class="active">Show All</button>
  <button data-filter=".web">Web Design</button>
  <button data-filter=".graphic">Graphic Design</button>
</div>

<div class="portfolio-grid">
  <div class="portfolio-item web"> ... </div>
  <div class="portfolio-item graphic"> ... </div>
  <div class="portfolio-item web"> ... </div>
  <div class="portfolio-item graphic"> ... </div>
</div>

Implementing Filtering with JavaScript

Using JavaScript, you can add event listeners to the filter buttons to show or hide items based on their categories. Here’s a basic example:

const buttons = document.querySelectorAll('.filter-buttons button');
const items = document.querySelectorAll('.portfolio-item');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const filter = button.getAttribute('data-filter');

    // Update active button style
    document.querySelector('.filter-buttons button.active').classList.remove('active');
    button.classList.add('active');

    // Show/hide items
    items.forEach(item => {
      if (filter === '*' || item.matches(filter)) {
        item.style.display = 'block';
      } else {
        item.style.display = 'none';
      }
    });
  });
});

Enhancing the Layout with Masonry.js

To achieve the Masonry layout, include Masonry.js in your project and initialize it after your content loads:

const grid = document.querySelector('.portfolio-grid');
const msnry = new Masonry(grid, {
  itemSelector: '.portfolio-item',
  columnWidth: '.portfolio-item',
  percentPosition: true
});

Conclusion

Combining Masonry.js with JavaScript filtering creates an attractive and interactive portfolio. Teachers can use this technique to help students understand layout design and JavaScript DOM manipulation. Students can adapt this code to display their own projects or artwork dynamically.