垂直显示图像直到页面结束，然后在 100% 高度响应 div 内水平继续

Question

我正在使用以下代码在具有 100% 高度和自动宽度的 div 中垂直显示图像。我希望图像垂直显示直到页面结束，然后开始水平显示。我希望内容 div 宽度根据显示的图像数量自动进行，但始终具有 100% 的高度。目前图像垂直显示，直到页面结束，然后其余图像隐藏在溢出中。

#content {
    min-height: 100%;
    display: table;
    width: auto;
    overflow-y: hidden;
}

#thumbnailgrid {
    overflow-y: hidden;
    height: 100%;
    max-height: 100%;
    width: auto;
}

#thumbnailgrid img {
    width: auto;
    height: 24%;
}

Answer 1

好的，这就是我的想法，您可能需要对其进行一些修改以满足您的需要，因为它不会跟踪边距或填充，但它应该可以帮助您解决问题：http://jsfiddle.net/crbmL7sb/4/

要查看它是否正常工作，请尝试调整结果窗口的大小并再次单击“运行”。您可能还想添加一个窗口调整大小事件侦听器。

这是 HTML：

<div class="wrapper">
    <div class="single">
        <img src="http://placehold.it/200x200&text=A1" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=A2" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=A3" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=A4" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=A5" alt="placeholder" />
    </div>
    <div class="single">
        <img src="http://placehold.it/200x200&text=B1" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=B2" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=B3" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=B4" alt="placeholder" />
        <img src="http://placehold.it/200x200&text=B5" alt="placeholder" />
    </div>
</div>

Javascript：

var CL = function( vals ) {
    columns = vals.columns;
    var wHeight = $(window).height();
    this.init = function() {
        this.createColumns();
        this.setBodyWidth();
    }

    this.createColumns = function() {
        //loop through all the big columns
        for(var i=0, l=columns.length; i < l; i++) {
            images = $(columns[i]).find("img"); //get all the images in this column
            columnHeight = 0; //set a flag to store the column height
            var newDiv = $("<div />").addClass("inner"); //create an inner div inside the column
            for (var p=0, n=images.length; p < n; p++) { //loop through all the images in this column
                columnHeight += $(images[p]).height(); //add the height of the current image to the column height flag
                if (columnHeight >= wHeight) { //compare the column height with the window height, if there's NOT enough room for the new image
                    newDiv.appendTo($(columns[i])); //append this column to the big parent div
                    var newDiv = $("<div />").addClass("inner"); //create a new column
                    columnHeight = $(images[p]).height(); //reset the column height flag
                }
                $(images[p]).appendTo(newDiv); //add the image to the current column
            }
            // THIS IS THE LINE I FORGOT
            newDiv.appendTo($(columns[i]));
        }
    }

    this.setBodyWidth = function() {
        //when moving the images in the appropriate divs is done
        var totWidth = 0;
        $(".inner").each(function() {
           totWidth += $(this).width(); //get the width of all the content
        }) //and set it to the main wrapper to create the horizontal scrollbar
        vals.wrapper.css({
            width: totWidth
        })
    }

    this.init();
}


//You need to somehow preload the images, or this will not work. Maybe add an overlay to cover the page while the images are being loaded and then fade it out. A simple window load even (like I commented out below) should work, but it appears to be broken on jsfiddle.
//$(window).load(function() {
    var cl = new CL({
        columns: $(".single"),
        wrapper: $(".wrapper")
    });
//});

还有一点 CSS

img {
    display: block;
}

.inner {
    float: left;
}

img {
    border: 4px solid white;
}

* {
    box-sizing: border-box;
}