[iChris]

Zitat von binolino

4. Deshalb funktioniert auch die Initialisierung via HTML nicht, da der JavaScript-Code unterhalb des eingefügten Teils nicht mehr ausgeführt wird.

Der schaut für mich auf den ersten Blick sauber aus. Zumindest steht es auf o.g. Anleitung der Webseite nicht anders aus.

Also selbst geschriebenen Code entfernen und happy sein :-)

Das kann man so leider nicht unterschreiben. Die Initialisierung der Lib via HTML führt wie mehrfach geschildert zum Problem, dass die Bilder erst korrekt dargestellt werden wenn alles mal im Cache liegt. Im FAQ der Lib wird auch explizit drauf hingewiesen, dass wenn man das Ganze mit Bildern nutzen will auch imagesLoaded verwenden soll und das dann auch richtig initialisert.

Zitat von Hafu

Aber erstens wusste ich nicht, dass man da noch options implementieren muss und zweitens nicht, wo genau man den zusätzlichen Code einfügen muss.

Wie schon von binolino beschrieben lässt man Libs eigentlich unangepasst. Theoretisch würde das trotzdem funktionieren wenn du eben jQuery und imagesLoaded zuvor eingebunden hast, da das initialize erst nach der Einbindung passiert. "Sauber" wäre es ein separates File als letztes hinzuzufügen.

Das Mansonry funktioniert jetzt nicht mehr, da das JS jetzt ein Syntax Error hat.
Du hast vergessen var $grid = $('.grid').imagesLoaded( function() { zu entfernen.


Füge einfach die fehlenden Libs hinzu:
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="Js/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<script src="Js/Navbar.js"></script>

und packe das initialisieren entweder in ein neues File oder in das schon vorhande Navbar.js und gebe dem vielleicht einen generischeren Namen.

$(document).ready(function() {
var $grid = $('.grid').imagesLoaded(function() {
$grid.masonry({
itemSelector: '.grid-item',
columnWidth: 399,
gutter: 30,
fitWidth: true
});
});
});

https://jsfiddle.net/u0qrkvpt/

und das data-masonry aus dem MarkUp entfernen