Question

enter image description here

我使用以下代码在具有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

好的，这就是我的目标，您可能需要稍微修改一下以满足您的需求，因为这不会跟踪边距或填充，但它应该可以帮助您解决问题：{{ 3}}

要查看它是否有效，请尝试调整结果窗口的大小并单击＆＃34;运行＆＃34;再次。您可能还想添加一个窗口调整大小事件侦听器。

这是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;
}

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

1 个答案: