Masonry Layout on Simple List

To turn Simple List to Masonry Layout, like this.

You can use this code to Page Header Injection

<style>
.list-simple-masonry {
  animation: fadein 1s 0.15s backwards;
  display: block !important;
  grid-template-columns: none !important;
}

.list-simple-masonry .list-item {
  margin-bottom: 20px !important;
  break-inside: avoid;
  transition: all 0.3s ease;
  height: auto !important;
  position: relative !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

.list-simple-masonry .list-item:first-child {
  margin-top: 0 !important;
}

.list-simple-masonry .list-item-content {
  position: relative !important;
  overflow: hidden;
  width: calc(100% - 40px);
  margin: 0;
  line-height: 1.4;
  padding: 20px;
  background: #f8f8f8;
  border-radius: 8px;
}

.list-simple-masonry .list-item-content__title {
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  font-size: 18px !important;
  font-weight: bold;
}

.list-simple-masonry .list-item-content__description {
  margin-top: 0 !important;
  line-height: 1.6;
}

.list-simple-masonry .list-item-content__description p {
  margin: 0 !important;
}

@keyframes fadein {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@media screen and (max-width:767px) {
  .list-simple-masonry {
    column-count: 1;
    column-gap: 20px !important;
    column-fill: balance;
    padding: 0 10px;
  }
}

@media (min-width: 768px) {
  .list-simple-masonry {
    column-count: 2;
    column-gap: 20px !important;
    column-fill: balance;
    padding: 0 10px;
  }
}

@media (min-width: 1024px) {
  .list-simple-masonry {
    column-count: 3;
    column-gap: 20px !important;
    padding: 0 15px;
  }
}

@media (min-width: 1440px) {
  .list-simple-masonry {
    column-count: 3;
    column-gap: 20px !important;
    padding: 0 20px;
  }
}
</style>

<script>
(function(){

function initListSimpleMasonry(container, options = {}) {
  container.classList.add('list-simple-masonry');
  
  const items = [...container.querySelectorAll('.list-item')];
  
  items.forEach((item, index) => {
    item.style.height = 'auto';
    item.style.position = 'relative';
    item.style.paddingBottom = '0';
    item.style.animationDelay = (index * 0.1) + 's';
  });

  if (options.shuffle) {
    const shuffled = items.sort(() => Math.random() - 0.5);
    shuffled.forEach(item => container.appendChild(item));
  }

  setTimeout(() => {
    items.forEach(item => {
      item.style.opacity = '1';
      item.style.transform = 'translateY(0)';
    });
  }, 100);
}

function initListSimpleMasonryPlugin(options = {}) {
  const defaultOptions = {
    shuffle: false,
    selector: '.user-items-list-simple'
  };
  
  const config = Object.assign(defaultOptions, options);
  
  let containers = [];
  let selector = config.selector;
  
  if (config.containerIDs) {
    selector = [];
    config.containerIDs.split(',').forEach(id => {
      const cleanId = id.replace(/#|\./, '');
      if (config.ignoreContainerIDs) {
        selector.push(`:not([id="${cleanId}"])`);
      } else {
        selector.push(`[id="${cleanId}"]`);
      }
    });
    
    if (config.ignoreContainerIDs) {
      selector = '.user-items-list-simple' + selector.join('');
    } else {
      selector = selector.join(',');
    }
  }
  
  containers = [...document.querySelectorAll(selector)];
  
  containers.forEach(container => {
    if (!container.classList.contains('list-simple-masonry')) {
      initListSimpleMasonry(container, config);
    }
  });
}

function domReady(callback) {
  if (document.readyState === 'interactive' || document.readyState === 'complete') {
    callback();
  } else {
    document.addEventListener('DOMContentLoaded', callback);
  }
}

function ajaxReady(callback) {
  const ajaxBody = document.querySelector('body[data-ajax-loader]');
  if (ajaxBody) {
    const observer = new MutationObserver(mutations => {
      if (mutations[0].attributeName === 'data-ajax-loader' && 
          ajaxBody.getAttribute('data-ajax-loader') === 'loaded') {
        callback();
      }
    });
    observer.observe(ajaxBody, { attributes: true });
  } else {
    window.addEventListener('mercury:load', callback);
  }
}

function dynamicDataReady(callback) {
  const listSections = [...document.querySelectorAll('.user-items-list-simple')];
  
  listSections.forEach(section => {
    const observer = new MutationObserver(mutations => {
      if (section.classList.contains('sqs-dynamic-data-ready')) {
        observer.disconnect();
        setTimeout(callback, 500);
      }
    });
    observer.observe(section, { attributes: true });
  });
}

function init(options = {}) {
  domReady(() => initListSimpleMasonryPlugin(options));
  ajaxReady(() => initListSimpleMasonryPlugin(options));
  dynamicDataReady(() => initListSimpleMasonryPlugin(options));
  
  window.addEventListener('load', () => {
    setTimeout(() => initListSimpleMasonryPlugin(options), 100);
  });
  
  window.addEventListener('resize', () => {
    setTimeout(() => initListSimpleMasonryPlugin(options), 200);
  });
}

window.listSimpleMasonry = { init };

setTimeout(() => {
  console.log('List Simple Masonry: Starting auto init...');
  init();
}, 100);

})();
</script>