砌體只顯示單列

第一次使用砌體，我似乎無法正常工作。目前只顯示爲單個列。我更像是一個設計師而不是開發人員，所以很可能我錯過了一些東西。這裏是源：砌體只顯示單列

<body> 
     <!--[if lt IE 7]> 
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
     <![endif]--> 

     <!-- Add your site or application content here --> 
<div id="container"> 
    <div class="masonryImage"> 
        <img src="img/masonry_001.jpg"> 
    </div> 
          
    <div class="masonryImage"> 
        <img src="img/masonry_002.jpg"> 
    </div> 
          
    <div class="masonryImage"> 
        <img src="img/masonry_003.jpg"> 
    </div> 

    <div class="masonryImage"> 
        <img src="img/masonry_004.jpg"> 
    </div> 

    <div class="masonryImage"> 
        <img src="img/masonry_001.jpg"> 
    </div> 
          
    <div class="masonryImage"> 
        <img src="img/masonry_002.jpg"> 
    </div> 
          
    <div class="masonryImage"> 
        <img src="img/masonry_003.jpg"> 
    </div> 

    <div class="masonryImage"> 
        <img src="img/masonry_004.jpg"> 
    </div> 
      
</div> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script> 
     <script src="js/plugins.js"></script> 
     <script src="js/main.js"></script> 
     <script src="js/jquery-1.11.0.min.js"></script> 
     <script src="js/masonry.pkgd.min.js"></script> 

     <script> 
    $(function(){ 

    var container = document.querySelector('#container'); 
var msnry = new Masonry(container, { 
    // options 
    itemSelector: 'masonryImage' 
}); 
    }); 
</script> 

    </body>

這裏是CSS：

#container { 
    width: 1200px; 
    margin: 0 auto; 
} 

.masonryImage { width: 25%; }

來源

2014-03-12 Jacob Taylor

既然你包括jQuery庫，你可以嘗試jQuery的解決方案

itemSelector: 'masonryImage'

該行masonryImage需要所以它變成.masonryImage

var $container = $('#container'); 
// initialize 
$container.masonry({ 
    columnWidth: 200, 
    itemSelector: '.masonryImage' 
});

http://jsfiddle.net/AdamAzad/88tYe/

來源

2014-03-12 05:50:53

我打的的jsfiddle做什麼，我想這是你真正想要它做的事情：

http://jsfiddle.net/88tYe/5/

我設置的div有一個百分比寬度，讓圖片在div裏面是100％（你真的不指定，如果你想要一個排水溝，所以我離開它）

的代碼非常簡單：

var $container = $('#container'); 
// initialize 
$container.masonry({ 
    itemSelector: '.masonryImage' 
});

而CSS

#container { width:1200px } 
.masonryImage { width: 25%; } 
.masonryImage img { width:100%; }

來源

2014-03-17 21:29:22 alxvo

我投你的解決方案，因爲你給了我一個好主意......我磚石也做的不是三隻一列，我也想在百分比的圖像尺寸。我在網站上做了所有類似砌體解釋的事情，但他們把事情搞得太多了。基於它們的說明，您必須爲圖像大小添加一個額外的sizer元素。我只是簡單地刪除了sizer並直接在圖像css中應用了30％的圖像大小，並且它完美地工作......像您的示例一樣簡單！ –

砌體只顯示單列

回答

相關問題