10

我正在尝试制作一个“图像马赛克”，主要由相同大小的图像组成，其中一些是双倍高度。

它们都应该像这样整齐地对齐：

目标

为了使这些马赛克的自动生成尽可能容易，我认为浮动它们是最好的选择。不幸的是，大块导致以下流在它后面，但不是在它之前：

当前浮动

我能做什么 - 除了手动定位它们 - 将图像放到我想要的位置，并且仍然可以轻松地自动创建类似的布局？

我目前使用的代码是：

小提琴

HTML：

<div class="frame">
    <div id="p11" class="img">1.1</div>
    <div id="p12" class="img h2">1.2</div>
    <div id="p13" class="img">1.3</div>
    <div id="p21" class="img">2.1</div>
    <div id="p22" class="img">2.2</div>
</div>

CSS：

.frame {
    background-color: blue;
    border: 5px solid black;
    width: 670px;
}
.img {
    width: 200px;
    height: 125px;
    background-color: white;
    border: 1px solid black;
    float: left;
    margin: 10px;
}
.h2 {
    height: 272px;
}
4

4 回答 4

3

您需要使用 Javascript 来实现此效果，我必须这样做一次，并且我使用了http://masonry.desandro.com/ - 效果很好！

于 2012-03-07T20:59:24.467 回答
1

纯 CSS 解决方案

在 Firefox、IE8+ 中测试（IE7 看起来需要针对添加到 2.1 的上边距，因为它与 1.1 重叠）。见小提琴。这假设.h2是中间 div （作为你的例子）。如果离开最div它不应该需要任何改变。如果最正确，您将需要扩大负边距以包括以下第三个div。

.h2 + div {
    float: right;
    margin: 10px 14px 10px 0; /*14px I believe also has to do with borders */
}

.h2 + div + div {
    margin-left: -434px; /*need to account for borders*/
    clear: right;
}
于 2012-03-07T22:05:13.930 回答
1

您可以使用这样的列布局：http: //jsfiddle.net/KKUZL/

我不知道这是否会与您的自动化过程冲突......

于 2012-03-07T23:52:30.683 回答
0

我意识到这不是一个纯 CSS 的解决方案，而是它的价值（JSFiddle）：

HTML：

<div id='container'></div>

CSS：

html, body {
    margin:0px;
    padding:0px;
    height:100%;
}
body {
    background-color:#def;
}
#container {
    margin:0px auto;
    width:635px;
    min-height:100%;
    background-color:#fff;
    box-shadow:0px 0px 5px #888;
    box-sizing:border-box;
    overflow:auto;
}
.widget {
    float:left;
    box-sizing:border-box;
    padding:10px 10px 0px 0px;
}
.widget > div{
    height:100%;
    box-sizing:border-box;
    color:#fff;
    font-size:3em;
    text-align:center;
    padding:.5em;
    overflow:hidden;
}
.widget > div:hover {
    background-color:purple !important;
}

JS：

////////////////////////////////////////
//  ASSUMPTIONS
//    
var TWO_COLUMN_WIDGET_COUNT = 1;
var ONE_COLUMN_WIDGET_COUNT = 15;

var NUMBER_OF_COLUMNS = 2;

////////////////////////////////////////
function rand(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
var colorFactory = (function () {
    var colors = [
        '#CC9A17',
        '#9B2C16',
        '#1A8B41',
        '#D97114',
        '#3B9EE6'];
    var index = 0;
    return function () {
        if (index > 4) {
            index = 0;
        }
        return colors[index++];
    }
})();
function widgetFactory(columnSpan) {
    return {
        'height': rand(10, 30) * 10,
            'width': 100 * columnSpan / NUMBER_OF_COLUMNS,
            'columnSpan': columnSpan,
            'color': colorFactory()
    }
}
function getWidgets() {
    var widgets = [];
    for (var i = 0; i < TWO_COLUMN_WIDGET_COUNT; i++) {
        widgets.push(widgetFactory(2));
    }
    for (var i = 0; i < ONE_COLUMN_WIDGET_COUNT; i++) {
        widgets.push(widgetFactory(1));
    }
    return widgets;
}
function getHighestOffset(offsets){

}
function getHighestSlot(offsets, numOfColumns){

}
$(document).ready(function () {
    var container = $('#container');
    var widgets = getWidgets();
    var col1 = Math.floor(container[0].offsetLeft);
    var col2 = Math.floor(container[0].clientWidth / 2 + container[0].offsetLeft);
    var offsets = {};
    offsets[col1] = 0;
    offsets[col2] = 0;
    var newLine = true;

    for (var i = 0; i < widgets.length; i++) {
        var w = widgets[i];
        var marginTop = 0;
        if (offsets[col1] < offsets[col2]) {
            marginTop = (offsets[col2] - offsets[col1]) * -1;
        }
        if(offsets[col1] <= offsets[col2] || w.columnSpan == 2){
            newLine = true;
        }
        var margin = 'margin-top:' + marginTop + 'px;';
        var height = 'height:' + w.height + 'px;';
        var color = 'background-color:' + colorFactory() + ';';
        var width = 'width:' + w.width + '%;';
        var padding = newLine ? "padding-left:10px;" : "";
        var component = $('<div class="widget" style="' + padding + margin + height + width + '"><div style="' + color + '">' + i + '</div></div>');
        component.appendTo(container);
        var c = component[0];

        var index = 0;
        var minOffset = null;
        for(var p in offsets){
            if(minOffset == null || offsets[p] < minOffset){
                minOffset = offsets[p];
            }
            if(p == Math.floor(c.offsetLeft)){
                index = 1;
            }
            if(index > 0 && index <= w.columnSpan){
                offsets[p] = c.offsetTop + c.offsetHeight;
                index++;
            }
        }
        newLine = minOffset >= offsets[col1];
    }
});
于 2014-03-25T18:55:13.623 回答