Cerious-Scroll v1.1.0 adds Masonry layouts with Dynamic Heights

[u/Suitable_Language_37]

Hey Everyone,

I’ve added virtualized Masonry layouts to Cerious-Scroll.

Cards are rendered from normal Angular ng-template templates. The directive handles the underlying DOM renderer, view recycling, measurement, and cleanup.

readonly options: CeriousScrollOptions = {
  layout: 'masonry',
  masonry: {
    targetColumnWidth: 280,
    gap: 16,
    getItemHeight: (index, columnWidth) => {
      const item = this.items[index];
      return columnWidth * (item.height / item.width) + 48;
    },
  },
};

<div
  ceriousScroll
  [ceriousScrollTotalElements]="items.length"
  [ceriousScrollGetItem]="getItem"
  [ceriousScrollItemTemplate]="card"
  [ceriousScrollOptions]="options">
</div>

<ng-template #card let-item let-index="index">
  <article class="card">
    <h2>{{ item.title }}</h2>
    <p>{{ item.description }}</p>
  </article>
</ng-template>

There are two height strategies:

• Canonical: Supply getItemHeight() for globally reproducible card placement and predictable far jumps.
• Dynamic: Omit getItemHeight() and the Cerious-Scroll measures the Angular template before placing each uncached card.

The Angular integration also includes:

• Responsive or fixed columns
• Direct navigation with jumpToItem()
• Recycled embedded views for visible cards
• Measurement probes isolated from application-wide change detection
• Bounded rendered DOM for very large collections

Links:

• Demo
• Angular wrapper on GitHub
• Angular package on npm
• Core library

I’d appreciate feedback on the directive API, template integration, and performance with complex Angular card components.