當css浮動時，Javascript檢查空格：左邊

好吧，現在..我真的不知道如何給這個標題。這是我的問題。我正在嘗試製作一個頁面，其中正文定義了另一個div的寬度a.k.a baser。當css浮動時，Javascript檢查空格：左邊

我有一個jQuery腳本，它檢測窗口的寬度，並在以後給出一個類body。例如當窗口的寬度大約爲900px - body將被賦予一個類.col_6。

每張卡的寬度爲150px，但是當他們有額外的類large時，它們的寬度將爲300px。現在的問題是，根據HTML中的cards的順序，如果應將card.large放置在只有150px寬的空間中，則會有一些空白空間。然後卡片將自動跳到下一行並在上一行留下150px的開放空間。

我想知道的是 - 我可以在腳本中添加什麼，以便稍後可以選擇放置在後面的150px寬卡片，並將其移動到空白處或使用javascript製作的div填充空白區域（爲其他目的）..

我希望你能夠通過閱讀這個找出我的問題..我做了一個jsfiddle，顯示我的代碼和問題。閱讀小提琴時，您可以嘗試調整窗口的大小。它會告訴你如何有時看到一個空的空間。

http://jsfiddle.net/EK8q2/4/

這裏是我的JavaScript/jQuery的，如果它可以幫助你任何方式..

$(document).ready(function() { 
    winResize(window.innerWidth); 
}); 

$(window).resize(function() { 
    winResize(window.innerWidth); 
    // Room for more functions 
}); 

function winResize(w) { 
    resizeBaser(w); 
    // Room for more functions 
} 

function resizeBaser(w) { 
    var index = Math.min(10, Math.floor(w/150)); 
    if (index > 0) { 
     $('body').alterClass('col_*', 'col_' + index); 
    } 
}

來源

2013-06-24 Dimser

你會反對使用像石工一樣的圖書館嗎？ http://masonry.desandro.com/ –

它真的很好..我可能會考慮使用它，如果沒有別的出現..我真的很討厭第三方jquery插件，因爲他們混淆了我的CSS，他們讓網站變得更重加載.. – Dimser

我也曾經這樣認爲。也許你可以提取你需要的邏輯。 –

我看到它的算法是這樣的：

附加到load/scroll/resize事件：

$（window）.on（'load scroll resize'，function ion（）{

}）;
在那裏，將$('.card')元素分組到一個行數組中。

喜歡的東西：

var rowsObj = {}, rows = []; 
$('.card').each(function(){ 
    var el = $(this), 
    pos = el.position(), 
    currentRow = rowsObj[pos.top] || (rowsObj[pos.top] = []); 
    currentRow.push(el); 
}); 
$.each(rowsObj, function(k, v) { 
    if (/^\d+(\.\d+)?$/.test(k)) { 
    rows.push(v); 
    } 
}); 
// rows now contains array of arrays of $-ed elements

3.然後我會從最終枚舉行開始，並試圖ID的所有孤兒卡（條件：最狹窄卡） - 有這些，我'從上到下搜索並試圖找到可能的新行（即該潛在行的最後一個元素）和orphan.insertAfter(thatElement)。插入後，我會從數組中排除兩行（一個包含orphan，另一個 - 不完整的行）。一直到沒有對（孤兒不完整）可以形成。

4.然後我會考慮如何將此邏輯擴展到比單卡大的寬度。

來源

2013-06-24 16:25:02 Andrevinsky

似乎無法找到這個頭和尾巴..你可以嘗試在我的小提琴中使用它，所以我可以看到它嗎？ – Dimser

在這裏，看看：http://jsfiddle.net/andrevinsky/XgwCz/2/ 打開控制檯，查看結果頁面的輸出 – Andrevinsky

我現在看到它了..但是我怎麼才能讓它真正執行任務和重新排序？ – Dimser

當css浮動時，Javascript檢查空格：左邊

回答

相關問題