jQuery砌體不工作。

我有它的工作，但由於某種原因，它剛剛停止工作，我不知道我已經做了什麼。框divs是浮動左，我只是不知道我哪裏出了問題。jQuery砌體不工作。

jQuery的

var $container = $('.work');    
$container.imagesLoaded(function(){     
    $container.masonry({ 
     itemSelector: '.box', 
     isAnimated: true, 
     columnWidth: 250     
    }); 
});

HTML

<div id="part-one" class="work"> 
    <div class="box col2"><img src="_assets/images/one.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/two.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/three.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/four.jpg" alt="" /></a></div> 
    <div class="box col2"><img src="_assets/images/five.jpg" alt="" /></a></div> 
</div>

CSS

.work { 
    margin-left:98px; 
    top:0; 
    max-width:1600px; 
    padding-bottom:100px; 
    position:absolute; 
}

來源

2012-08-23 green_arrow

請問您能提供一個完全不工作的例子嗎？ – Asken

只是一個猜測，但是當您刪除imagesLoaded（）並在文檔加載時執行masonry（）部分時，它會工作嗎？ –

不，它確實拉了腳本，我檢查了螢火蟲，我完全喪失了！我會盡力得到一個jsfiddle –

刪除您的columnWidth屬性，砌體將使用第一個元素的寬度。（Docs）。

看看這個JSFiddle。 http://jsfiddle.net/s8PhS/14/

如果您在JSFiddle中調整HTML容器大小，它也將動態調整大小。
我還爲演示目的添加了一些額外的<div>元素，並且爲Odd Five element添加了不同的高度，並且您可以看到砌體插件完美地啓動並定位元素。

所以基本上，刪除屬性columnWidth: 250，讓砌體動態地撿起它。

在JSFiddle，這似乎解決了你的問題。

只是一個提示：我最近使用這個相同的jquery.masonry插件，但也想把我的元素進行排序，我發現這個驚人的插件叫做 Isotope這是驚人的，更加個性化。

Check out the Demo on the Homepage!

來源

2012-08-23 11:11:00 Anil

這似乎是與磚石列寬屬性和可用的空間來顯示DIV。試圖在你的jsfiddle上玩弄思考。祝你好運。

來源

2012-08-23 10:40:57 ThierryB

jQuery砌體不工作。

回答

相關問題