插板風格的網格：使第一個元素兩次更寬與JS

我正在開發一個插板風格的博客（如Pinterest）使用教程Ben Holland。每個塊具有絕對位置和它的位置（頂部和左）正在與jQuery腳本http://labs.benholland.me/pinterest/js/script-centered.js 插板風格的網格：使第一個元素兩次更寬與JS

參見工作演示計算：http://labs.benholland.me/pinterest/demo-centered.php

在此演示的所有元素具有相同的寬度。它被設置在兩個地方：在CSS.block {width: 300px;}和的JavaScriptvar colWidth = 300;

問題： 我需要做的第一塊是的兩倍寬，因爲所有其他和確保元素的位置不被摺疊。 Click to see example。

我知道如何完成CSS部分：.block:first-child {width: 610px;} （600px的+ 10px的保證金）

但由於我有限的JavaScript的知識，我無法完成的JavaScript一部分。任何幫助，將不勝感激。

謝謝！

見的jsfiddle http://jsfiddle.net/pq8hqabL/ - 僅適用於窗口調整網站我開發上

現場演示 - http://goo.gl/Ckp2Qh

來源

2014-08-29 Anna

我嘗試過使用砌體（http://masonry.desandro.com），我想我已經達到了預期的效果。這是小提琴：http://jsfiddle.net/pq8hqabL/1。

HTML砌築裝：

<div id="wrapper"> 
    <div class="masonry js-masonry" data-masonry-options='{ "columnWidth": 241,"gutter":12}'> 
     <div class="item w2"> 
      Lorem ipsum... 
     </div> 
     <div class="item w2"> 
      Lorem ipsum... 
     </div> 
     ... 
    </div> 
</div>

而CSS：

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

#wrapper { 
    width: 1024px; 
    margin: 0 auto; 
} 

.masonry { 
    background: #EEE; 
} 

.masonry .item { 
    width: 241px; 
    padding: 12px; 
    margin-bottom: 10px; 
    float: left; 
    background: #fff; 
    border: 1px solid #ddd; 
} 

.item.w2 { width: 494px; }

來源

2014-09-06 18:30:11 thejmazz

如果你使用jQuery，這讓選擇在JavaScript輕鬆了許多。你可以簡單地這樣做：

$(document).ready(function() { 
    var colWidth = 300; 
    var bigWidth = 2 * colWidth; 
    $('.block:first-child').css({'width': bigWidth + 'px'}); 
}

當然，你也可以讓bigWidth字符串值爲「610px」，但留下的東西作爲數字，直到你真正把它應用到CSS是我的建議，爲更好地計算。這就是你想知道的嗎？

PS。如果你以前沒有使用jQuery的，所有你需要做的是鏈接到它其它腳本的任何前：

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>

PPS：您也可以使用：第n個孩子（）選擇：

$('.block:nth-child(1)').css({'width': bigWidth + 'px'});

來源

2014-08-29 18:06:06 thejmazz

感謝您的答覆！上面的代碼給我一個錯誤：''未捕獲的ReferenceError：setupBlocks沒有定義'。 ** setupBlocks **是本教程的body onload參數。此外，即使這段代碼可以工作，我也不認爲其餘塊的位置'top'和'left'計算是正確的。 – Anna 2014-08-29 19:59:37

你有沒有在你的代碼中定義的函數setupBlocks（）？是的，您可能必須更改計算才能使所有「頂」和「左」值正確。或者，您可以將所有塊設置爲正常寬度，然後通過將特定類應用於第一個塊，絕對在前兩個塊上放置較大的塊。你可以發佈一個jsfiddle嗎？ – thejmazz 2014-08-29 20:14:44

是的，當然，這裏是JSFiddle：http://jsfiddle.net/pq8hqabL/ - 但它只適用於窗口大小調整（可能是因爲body load函數）。這裏是我正在開發的網站上的實時演示 - http://goo.gl/Ckp2Qh – Anna 2014-08-29 20:32:56

插板風格的網格：使第一個元素兩次更寬與JS

回答

相關問題