Question

在过去的12个小时里，我一直在试图找到解决这个问题的方法，但我还是没有设法做到这一点......

我想将基于百分比的值设置为Masonry itemSelector（50％，33.333333％和25％，具体取决于我想要的列数 - 2,3或4）并且在项目之间有一个15px的装订线。

我如何看待它是否如果我想要4列，每列应该是25％宽减去15px（排水沟），但我只是想办法做到这一点。我必须处于某种脑力锁定状态......

HTML

<div class="container">
    <div id="content">
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
        <article class="post post-columns">asd</article>
        <article class="post post-columns">dsa</article>
    </div>
<div class="container">

CSS

article {
    background: #333;
    margin-bottom: 15px;
    height: 50px;
}
.post-columns {
    width: 25%;
    float: left;
}
.container {
    background: #dadada;
}

JS

$(document).ready(function () {
    var container = $('#content');

    container.masonry({
        itemSelector: '.post',
        columnWidth: '.post-columns',
        gutter: 0
    }); 
});

以下是演示：http://jsfiddle.net/4urJT/3/

谢谢！

Answer 1

令人惊讶的是，我设法用我糟糕的JS知识做到了！它不漂亮，但它有效。

$(document).ready(function () {

    var columnCount = 4;
    var gutter = 15;

    $('.post').width(function() {
        return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
    });

    $( window ).resize(function() {
        $('.post').width(function() {
            return (((($('#content').width() - ((columnCount*gutter) - gutter)) / columnCount) / $('#content').width()) * 100)+'%';
        });
    });
    var container = $('#content');

    container.masonry({

        itemSelector: '.post',
        gutter: gutter,

    });     
});

以下是工作演示：http://jsfiddle.net/4urJT/4/

Bootstrap＆amp;砌体天沟 - 响应

1 个答案: