标签: jquery-masonry

嘿伙计们,我正在尝试使用令人敬畏的jquery砌体插件 - > http://desandro.com/resources/jquery-masonry/

该插件工作正常,但是我在创建布局时遇到问题,我使用nth-child()选择器来消除每个第三个元素的边距.

#footerwidgets li.widget {
    margin: 0px 24px 24px 0px;
    width:340px;
}

#footerwidgets li.widget:nth-child(3n) {
  margin-right:0px;
}

因为我的这个小部件的容器正好是1068px宽,所以三个小​​部件完全适合(因为最后一个小部件没有正确的边距)

当我尝试使用jquery masonry插件时,这种行为会被忽略!只有两列适合.(插件工作,所以所有小部件都以砖石风格浮动)当我检查元素时,每个第三个元素的右边距也是24px.所以nth-child被忽略了.

有什么方法可以使它工作？

我正在使用jQuery Masonry来显示一个盒子网格(大小相同).

这是我的测试网站.

当浏览器宽度为1100px或更低时,效果很好.

在1270px及以上观看时,Masonry不断在右侧添加列.

我在外部容器上设置了最大宽度,但是Masonry似乎并没有承认它,只是不断扩大砌体容器的宽度.

在Masonry Centered页面上,您可以看到它居中,但没有约束宽度.当您增加浏览器宽度时,它会不断扩展并添加更多列.

如何添加一条硬规则来说"这是最大宽度.停止尝试添加更多列."

谢谢

更新 这里是一个jsfiddle,虽然我不确定它是否设置正确.最好只是去我的测试网站看看问题.

我在一组图像上使用Masonry.js并尝试将整个组中心化.当我指定容器网格和设置的宽度时,我已经让组成为中心margin:0 auto,但是我希望使用更流畅的网格或百分比来使其居中.(我意识到我可以使用媒体查询来更改固定宽度,但寻找更无缝的选项.)

下面是一个具有固定宽度的代码示例,它的中心位置很好.

而且这里有一个例子,我想中心,而是更流畅的例子margin:0 auto是行不通的.

我正试图将一个砌筑容器放在页面上.此刻,它与左侧对齐.我的CSS中有margin auto,而JS中的isFitWidth:true,但似乎都没有做任何事情.我也尝试在我的CSS中放置display:block.

这是HTML;

<div id="masonry_container" class="group">

<div class="masonry_item">
    <a href="http://storyville.jonmarkoff.com/storyvillewp"target="_blank">
    <img src="images/storyville_home.png" alt="Storyville Entertainment"/>
    <h3>Storyville Entertainment</h3></a>
</div><!--masonry_item-->


<div class="masonry_item">
    <a href="http://www.ducklingfarm.com"target="_blank">
    <img src="images/udof_home.jpg" alt="Ugly Duckling Organic Farm"/>
    <h3>Ugly Duckling Organic Farm</h3></a>
</div> <!--masonry_item-->


<div class="masonry_item">
    <a href="http://www.underdonk.com"target="_blank">
    <img src="images/underdonk_home.png" alt="underdonk"/>
    <h3>Underdonk</h3></a>
</div> <!--masonry_item-->

<div class="masonry_item">
    <a href="http://www.jaeeunlee.com" target="_blank">
    <img src="images/jaeeunlee_home.png" alt="jaeeunlee"/>
    <h3>www.jaeeunlee.com</h3></a>
</div> <!--masonry_item-->

<div class="masonry_item">
    <img src="images/goindoor_hospitals.png" alt="goindoor"/>
    <h3>Goindoor</h3>
</div> <!--masonry_item-->

<div class="masonry_item">
    <img src="images/cakes_home.jpg" alt="wonderfully whimsical cakes"/>
    <h3>Wonderfully Whimsical Cakes</h3>
</div> <!--masonry_item-->

</div><!--#masonry_container .group-->

CSS;

.group {
    display: …

我在包含下面列出的修改后的列表项的父元素（一个无序列表）上激活了 Masonry（Chrome 的 F12 DEV 工具以粉红色显示 margin-bottom 和 margin-right）：

加载文档时，尽管每个列表项的 CSS 如下所示，但仍会发生上述情况；

li {
    background-color: #fff;
    border: 1px solid #dfdfdf;
    float: left;
    padding: 20px;
    position: relative;
    width: calc(50% - 10px);
    margin-right: 10px;
    margin-bottom: 10px;
}

我使用的 jQuery 如下；

$(document).ready(function(){
    $("ul").masonry({
        itemSelector: 'li'
    });
});

但是，一旦窗口水平调整大小，CSS 样式就会生效，如下所示；

关于如何在页面加载时实现上述目标的任何想法？

更新*

JSFiddle：点击这里。如果上述问题没有出现，请尝试单击“运行”按钮（Ctrl + Return）。

我正在尝试在jQuery Masonry完成定位魔术时执行回调函数,以防止代码中出现无格式内容.

但是,出于测试的目的,我使用的是一个根本没有调用的简单警报.

var $jigsaw = $('#jigsaw');

$jigsaw.imagesLoaded( function(){
    $jigsaw.masonry({
     columnWidth : 180,
      isAnimated : !Modernizr.csstransitions,
     isResizable : true,
    itemSelector : '.piece'
    }, function(){
        alert('Completed');
    });
});

我可能会遗漏一些明显的东西,但任何帮助都会受到赞赏

我正在尝试创建一个tumblr主题,我正在使用jonery的砌体和无限滚动插件.砖石工作得很好.但是,我无法让无限卷轴工作.这是我的jQuery代码:

<script type="text/javascript" src="../jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="../masonry.js"></script>
<script type="text/javascript" src="../jquery.infinitescroll.js"></script>
<script type="text/javascript">
$('document').ready(function(){
$('#content').imagesLoaded(function(){
$('#content').masonry({
itemSelector: '.post',
columnWidth: 260});
});
$('#content').infinitescroll({
    navSelector  : '#nav',
    nextSelector : '#nav a',
    itemSelector : '#content div.post',          
    },
    function( newElements ) {
    var $newElems = $( newElements );
    $('#content').masonry( 'appended', $newElems, function(){$newElems.fadeIn('slow');}   );
  });
});
</script>

这是我的HTML:

 <div id="content">
   {block:Posts}
   {block:Photo}
<div class="post">
<img src="{PhotoURL-250}" width="250" />
</div>
   {/block:Photo}
   {/block:Posts}
 {block:Pagination}
<div id="nav">{block:NextPage}<a href="{NextPage}"></a>{/block:NextPage}</div>
 {/block:Pagination}

任何帮助是极大的赞赏.提前致谢.

*我还要注意,我故意缩短了js文件的URL,以使帖子看起来更好,在我的实际主题中,URL是正确的.

这是我添加调试后控制台显示的内容(说实话,我真的不知道这意味着什么,但希望它有帮助)

Testing console
["determinePath", 
Array[2]
0: "/page/"
1: …

我已经在任何地方搜索过,无法找到答案.

如何在砌体布局中垂直和水平居中div？我基本上想要围绕这个div构建一切.

任何帮助都会很棒!

http://isotope.metafizzy.co/

我是Backbone视图的上下文,我在DOM中添加和删除视图.但是,包含Isotope元素的容器仅在初始加载期间起作用; 之后,当容器被移除并再次添加时,Isotope不能按预期工作.

我在这里做了快速的JSfiddle:http: //jsfiddle.net/mulderp/T8aSQ/6/ - >

当我添加Isotope容器时:

var list = '<div data-foo="bar" id="container"><div class="item red"></div><div class="item blue"></div></div>';
$container.html(list);
$container.isotope('shuffle');

同位素不再运行,虽然DOM结构看起来与第一个类似.

任何人都知道会发生什么,以及如何让Isotope在第一次初始化期间读取新元素？

我有一个网站使用jquery的同位素包装器,其代码如下:

<div class="isotopeWrapper clearfix isotope">
  <article class="col-sm-4 isotopeItem isotope-item">
    <!-- item1 --->
  </article>

  <article class="col-sm-4 isotopeItem isotope-item">
    <!-- item2 --->
  </article>

  <!-- ... unknown amount of items with unknown height -->
</div>

我正在使用的模板是使用这个javascript代码初始化同位素的东西:

if($('.isotopeWrapper').length){

    var $container = $('.isotopeWrapper');
    var $resize = $('.isotopeWrapper').attr('id');

    // initialize isotope
    $container.isotope({
        itemSelector: '.isotopeItem',
        resizable: false, // disable normal resizing
        masonry: {
            columnWidth: $container.width() / $resize
        }



    });
    var rightHeight = $('#works').height();
    $('#filter a').click(function(){


        $('#works').height(rightHeight);
        $('#filter a').removeClass('current');


        $(this).addClass('current');
        var selector = $(this).attr('data-filter');
        $container.isotope({
            filter: selector,
            animationOptions: …