0

我正在尝试制作具有砖石效果的博客页面。检查这个小提琴http://jsfiddle.net/V3rJt/

我面临的问题是，假设我的最大宽度为 1080 像素，并且我想要 3 个具有相同装订线空间的相等列，那么它的工作正常没问题。

但是，当我调整浏览器窗口的大小时，我希望布局切换到 2 个相等的列（必须填充现在可用的空间，它的宽度正在缩小）并进一步到一列博客文章。

请看下面这张图片

在此处输入图像描述

如果有人可以帮助我解决这个问题，那就太好了。对不起我的英语我不是说英语的人。

HTML

<div class="section_bg">
            <div class="insection_bg sparq_blog js-masonry"  data-masonry-options='{ "columnWidth": 60, "gutter": 10 }'>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other contentLorem ipusm is a great dummy text to place for in blog post and any other content..</p>
                    <a class="readmore" href="">Read More</a>
                </div>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other content.</p>
                    <a class="readmore" href="">Read More</a>
                </div>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other content.</p>
                    <a class="readmore" href="">Read More</a>
                </div>
                <div class="blogpost">
                    <img src="http://placehold.it/200x200" />
                    <h2>Blog post title</h2>
                    <span class="blogpost_date">17th August 2013</span>
                    <p class="sparq_ex">Lorem ipusm is a great dummy text to place for in blog post and any other content.</p>
                    <a class="readmore" href="">Read More</a>
                </div>
            </div>
        </div>

CSS

.section_bg {
    padding: 100px 0;
    overflow: hidden;
    background: #f7f6f6;

}
.insection_bg {
    max-width: 1080px;
    margin: 0 auto;
}
.blogpost {
    background: #ffffff;
    max-width: 26%;
    padding: 20px;
    float: left;
    margin-bottom: 25px;
    box-shadow: 0px 2px 2px -1px #ccc;
}
.blogpost img {
    display: block;
    margin: 0 auto;
    width: 100%;
}
.masonry .blogpost {
  margin-bottom: 10px;
  background: #D26;
  border: 2px solid #333;
  border-color: hsla(0, 0%, 0%, 0.5);
  border-radius: 5px;
}
4

1 回答 1

6

不是根据特定宽度调整列的大小（如 jsfiddle 中所做的那样），而是使用文档中指定的元素大小调整：http: //masonry.desandro.com/options.html#element-sizing

然后列宽将从元素的大小中提取（然后您可以通过 CSS 将其设置为页面宽度的百分比）。然后您可以使用媒体查询根据屏幕大小更改每个项目的宽度。文档中解释得很清楚。

这是给你的小提琴：http: //jsfiddle.net/V3rJt/3/

的JavaScript：

$(document).ready(function() {

      function masonry() {
     //masonry
var container = document.querySelector('.js-masonry');
var msnry = new Masonry( container, {
  itemSelector: '.blogpost',
  columnWidth: '.blogpost'
});

  };

  masonry();

});

CSS：

/* I also used box-sizing:border-box; because it makes the sizing easier with % and px */

.blogpost {
    background: #ffffff;
    width: 31%;
    margin:0 1% 25px;
    padding: 20px;
    float: left;
    box-shadow: 0px 2px 2px -1px #ccc;
}


@media (max-width: 600px) {
  /* 10 columns for larger screens */
  .blogpost { width: 48%; }
}
于 2013-08-23T13:10:27.103 回答