Responsive in full width container

[alamchrstn]

Hi, is there any example for using this to achieve responsiveness in a fluid container? Thanks in advance...

[pdokas]

Hey there! Unfortunately no, there isn't. I’m not sure this aligns with the concept of fluid containers, it depends on the exact behavior you’re trying to achieve. But conceptually you’ll want to recalculate your justified layout when the container is resized. You can't simply scale it up/down to meet the new total dimension.

[englishextra]

@alamchrstn @pdokas

To achieve responsiveness:

/*!
 * throttle
 */
(function (root) {
    "use strict";
    var throttle = function (func, wait) {
        var ctx;
        var args;
        var rtn;
        var timeoutID;
        var last = 0;
        function call() {
            timeoutID = 0;
            last = +new Date();
            rtn = func.apply(ctx, args);
            ctx = null;
            args = null;
        }
        return function throttled() {
            ctx = this;
            args = arguments;
            var delta = new Date() - last;
            if (!timeoutID) {
                if (delta >= wait) {
                    call();
                } else {
                    timeoutID = setTimeout(call, wait - delta);
                }
            }
            return rtn;
        };
    };
    root.throttle = throttle;
})("undefined" !== typeof window ? window : this);
/*!
 * run
 */
(function (root, document) {
    "use strict";
        /* var defaults = {
            containerWidth: 1060,
            containerPadding: 10,
            boxSpacing: 10,
            targetRowHeight: 320,
            targetRowHeightTolerance: 0.25,
            maxNumRows: Number.POSITIVE_INFINITY,
            forceAspectRatio: false,
            showWidows: true,
            fullWidthBreakoutRowCadence: false,
            widowLayoutStyle: 'left'
        }; */
        var applyJustifiedLayout = function (container, layoutSizes, layoutConfig) {
            var geometry = justifiedLayout(layoutSizes, layoutConfig);
            console.log("geometry", geometry);
            var boxes = geometry.boxes.map(function (box) {
                    return '<div class="box" style="width: ' + box.width + 'px; height: ' + box.height + 'px; top: ' + box.top + 'px; left: ' + box.left + 'px"></div>';
                }).join('\n');
            container.innerHTML = boxes;
            container.style.height = geometry.containerHeight + "px";
        };
        var container = document.getElementsByClassName("justified")[0] || "";
        var layoutSizes = [0.5, 1.5, 1, 1.8, 0.4, 0.7, 0.9, 1.1, 1.7, 2, 2.1];
        var handleJustifiedLayout = function () {
            var layoutConfig = {
                containerPadding: 10,
                containerWidth: container.offsetWidth
            };
            applyJustifiedLayout(container, layoutSizes, layoutConfig);
        };
        handleJustifiedLayout();
        var updateJustifiedLayoutThrottled = throttle(handleJustifiedLayout, 2000);
        updateJustifiedLayoutThrottled();
        if (container) {
            root.addEventListener("resize", updateJustifiedLayoutThrottled, {passive: true});
        }
})("undefined" !== typeof window ? window : this, document);

        .justified {
            position: relative;
            background: seagreen;
            /*width: 100%;*/
        }
        .box {
            position: absolute;
            background: yellowgreen;
        }

        <div class="justified"></div>

[barrywoolgar]

Thank you for sharing @englishextra !