{"_path":"/knowledge-base/js-horizontal-masonry-gallery","_draft":false,"_partial":false,"_empty":false,"title":"JS: Horizontal Masonry Gallery Snippet","description":"","excerpt":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"js-horizontal-masonry-gallery-snippet"},"children":[{"type":"text","value":"JS: Horizontal Masonry Gallery Snippet"}]},{"type":"element","tag":"code","props":{"code":"<div class=\"gallery-row\">\n    <img src=\"...\">\n    <img src=\"...\">\n    <img src=\"...\">\n<div>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"<div class=\"gallery-row\">\n    <img src=\"...\">\n    <img src=\"...\">\n    <img src=\"...\">\n<div>\n"}]}]}]},{"type":"element","tag":"code","props":{"code":"const rows = document.getElementByClassname('galler-row');\n\nconst makeRow = el => {\n    let r = 0;\n    let images = [];\n    el.childNodes.forEach(element => {\n        if (element.nodeName == 'IMG') {\n            images.push(element);\n            element.addEventListener('load', () => {\n                const ratio =\n                    element.naturalWidth / element.naturalHeight;\n                element.setAttribute('data-ratio', ratio);\n                r += ratio;\n                resize(r, images);\n            });\n        }\n    });\n};\nconst resize = (r, images) => {\n    images.forEach(img => {\n        let ratio = img.getAttribute('data-ratio');\n        img.style.width = `${(ratio / r) * 100}%`;\n    });\n};\n\nrows.foreach(row => makerow(row))\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"text","value":"const rows = document.getElementByClassname('galler-row');\n\nconst makeRow = el => {\n    let r = 0;\n    let images = [];\n    el.childNodes.forEach(element => {\n        if (element.nodeName == 'IMG') {\n            images.push(element);\n            element.addEventListener('load', () => {\n                const ratio =\n                    element.naturalWidth / element.naturalHeight;\n                element.setAttribute('data-ratio', ratio);\n                r += ratio;\n                resize(r, images);\n            });\n        }\n    });\n};\nconst resize = (r, images) => {\n    images.forEach(img => {\n        let ratio = img.getAttribute('data-ratio');\n        img.style.width = `${(ratio / r) * 100}%`;\n    });\n};\n\nrows.foreach(row => makerow(row))\n"}]}]}]}]},"public":true,"body":{"type":"root","children":[{"type":"element","tag":"h1","props":{"id":"js-horizontal-masonry-gallery-snippet"},"children":[{"type":"text","value":"JS: Horizontal Masonry Gallery Snippet"}]},{"type":"element","tag":"code","props":{"code":"<div class=\"gallery-row\">\n    <img src=\"...\">\n    <img src=\"...\">\n    <img src=\"...\">\n<div>\n","language":"html"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"class"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"gallery-row\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    <"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"src"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"\"...\""}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"<"}]},{"type":"element","tag":"span","props":{"style":{"color":"#7EE787"}},"children":[{"type":"text","value":"div"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":">"}]}]}]}]}]},{"type":"element","tag":"code","props":{"code":"const rows = document.getElementByClassname('galler-row');\n\nconst makeRow = el => {\n    let r = 0;\n    let images = [];\n    el.childNodes.forEach(element => {\n        if (element.nodeName == 'IMG') {\n            images.push(element);\n            element.addEventListener('load', () => {\n                const ratio =\n                    element.naturalWidth / element.naturalHeight;\n                element.setAttribute('data-ratio', ratio);\n                r += ratio;\n                resize(r, images);\n            });\n        }\n    });\n};\nconst resize = (r, images) => {\n    images.forEach(img => {\n        let ratio = img.getAttribute('data-ratio');\n        img.style.width = `${(ratio / r) * 100}%`;\n    });\n};\n\nrows.foreach(row => makerow(row))\n","language":"js"},"children":[{"type":"element","tag":"pre","props":{},"children":[{"type":"element","tag":"code","props":{"__ignoreMap":""},"children":[{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"rows"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" document."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"getElementByClassname"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'galler-row'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"makeRow"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"el"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" r "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"0"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" images "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" [];"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    el.childNodes."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"forEach"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"element"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"if"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" (element.nodeName "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'IMG'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":") {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            images."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"push"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"(element);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            element."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"addEventListener"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'load'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":", () "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"ratio"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                    element.naturalWidth "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" element.naturalHeight;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                element."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"setAttribute"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'data-ratio'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":", ratio);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                r "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"+="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" ratio;"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"                "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"resize"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"(r, images);"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"            });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        }"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"const"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"resize"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" ("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"r"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":", "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"images"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    images."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"forEach"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"img"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" {"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"let"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" ratio "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" img."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"getAttribute"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"'data-ratio'"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":");"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"        img.style.width "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"="}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"`${"}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"ratio"}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"/"}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"r"}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":") "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"*"}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#79C0FF"}},"children":[{"type":"text","value":"100"}]},{"type":"element","tag":"span","props":{"style":{"color":"#A5D6FF"}},"children":[{"type":"text","value":"}%`"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":";"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"    });"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"};"}]}]},{"type":"element","tag":"span","props":{"class":"line"},"children":[]},{"type":"element","tag":"span","props":{"class":"line"},"children":[{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"rows."}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"foreach"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"("}]},{"type":"element","tag":"span","props":{"style":{"color":"#FFA657"}},"children":[{"type":"text","value":"row"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#FF7B72"}},"children":[{"type":"text","value":"=>"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":" "}]},{"type":"element","tag":"span","props":{"style":{"color":"#D2A8FF"}},"children":[{"type":"text","value":"makerow"}]},{"type":"element","tag":"span","props":{"style":{"color":"#C9D1D9"}},"children":[{"type":"text","value":"(row))"}]}]}]}]}]}],"toc":{"title":"","searchDepth":2,"depth":2,"links":[]}},"_type":"markdown","_id":"content:04.knowledge-base:js-horizontal-masonry-gallery.md","_source":"content","_file":"04.knowledge-base/js-horizontal-masonry-gallery.md","_extension":"md"}