-
-
Save mpmazim/c668d28fec4bef30c3fbf4518b8a7f1f to your computer and use it in GitHub Desktop.
Masonry implementation in Angular 2+ only with JS and CSS, ordered horizontaly
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .card-img-overlay-gradient { | |
| background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0)); | |
| } | |
| .flex-container { | |
| display: grid; | |
| grid-gap: 10px; | |
| grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); | |
| grid-auto-rows: 20px; | |
| } | |
| .flex-item {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <nav class="navbar fixed-top navbar-dark" *ngIf="this._contentService.getContent(this.id)" [style.background-color]="this._contentService.getColor(this.id)"> | |
| <a (click)="this._location.back()" style="cursor: pointer"> | |
| <span class="navbar-brand mb-0 h1"> | |
| <i class="fa fa-chevron-left" aria-hidden="true" style="color: white; padding-right: 10px;"></i> | |
| {{ this._contentService.getTitle(this.id) }} | |
| </span> | |
| </a> | |
| <span class="navbar-text" style="color: #fff"> | |
| {{ this._configurationService.getStrings().last_updated }} {{ this._contentService.getTime(this.id) }} | |
| <i class="fa fa-refresh" style="color: #fff; padding-left: 5px;" aria-hidden="true" (click)="this._contentService.reload(this.id)"></i> | |
| </span> | |
| </nav> | |
| <main role="main" class="tentu-content-container" (window:resize)="onResize(event)" *ngIf="this._contentService.getContent(this.id)"> | |
| <div class="flex-container" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="300" (scrolled)="this._contentService.loadOnScroll(this.id)"> | |
| <div class="flex-item animated fadeIn" *ngFor="let element of this._contentService.getContent(this.id).content"> | |
| <a [routerLink]="['/detail', element.id]" style="text-decoration: none;"> | |
| <div [attr.id]="'element' + element.id" class="card bg-dark text-white" (load)="resizeElementById('element')"> | |
| <img class="card-img-top" *ngIf="element.image != ''" src="{{ element.image }}" alt="{{ element.title }}" style="background-color: #fff"> | |
| <div class="card-body"> | |
| <h5 class="card-title"> | |
| {{ element.title }} | |
| </h5> | |
| <p class="card-text" [innerHTML]="element.description"></p> | |
| </div> | |
| <div class="card-footer"> | |
| <small class="text-muted"> | |
| {{ element.author }} | |
| </small> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </main> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Component, OnInit, AfterViewChecked } from '@angular/core'; | |
| import { Location } from '@angular/common'; | |
| import { ActivatedRoute } from '@angular/router'; | |
| import { ContentService } from '../../_services/content.service'; | |
| import { ConfigurationService } from '../../_services/configuration.service'; | |
| @Component({ | |
| selector: 'app-content', | |
| templateUrl: './content.component.html', | |
| styleUrls: ['./content.component.css'] | |
| }) | |
| export class ContentComponent implements OnInit, AfterViewChecked { | |
| private id: string; | |
| constructor(private _location: Location, | |
| private _activatedRoute: ActivatedRoute, | |
| private _contentService: ContentService, | |
| private _configurationService: ConfigurationService) { } | |
| ngOnInit() { | |
| this._activatedRoute.params.subscribe(params => { | |
| this.id = params['type'] + params['id']; | |
| this._contentService.init(params['type'], params['id']); | |
| }); | |
| } | |
| ngAfterViewChecked() { | |
| this.resizeAllGridItems(); | |
| } | |
| onResize(event) { | |
| this.resizeAllGridItems(); | |
| } | |
| resizeGridItem(item) { | |
| var grid = document.getElementsByClassName("flex-container")[0]; | |
| var rowHeight = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-auto-rows')); | |
| var rowGap = parseInt(window.getComputedStyle(grid).getPropertyValue('grid-row-gap')); | |
| var rowSpan = Math.ceil((item.querySelector('.card').getBoundingClientRect().height + rowGap) / (rowHeight + rowGap)); | |
| item.style.gridRowEnd = "span "+ rowSpan; | |
| } | |
| resizeAllGridItems() { | |
| var allItems = document.getElementsByClassName("flex-item"); | |
| for (var x = 0; x < allItems.length; x++) { | |
| this.resizeGridItem(allItems[x]); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment