你如何在window.onresize函數重新計算的元件寬度

作爲自我改善鍛鍊我建立了一塊平原JS，將一組不同大小的正方形的（所有相同的縱橫比的），並規定他們在一個流體網格中，以便沒有差距。你如何在window.onresize函數重新計算的元件寬度

花了一晚後，我有一個非常基本的模型，適用於我給出的測試數據。

最後一個問題，我需要解決之前，我可以證明它那顆更多的時間是這樣的：

調整時不被重新計算的父元素（的#container）寬度的瀏覽器窗口。
此寬度與網格項的高寬比一起使用來計算行高度，因此當您調整窗口大小時，除垂直位置外，所有事情都可以正確移動。

通過window.onresize被調用的函數是如下

function() { 
    var parentElem = this.element; 
    console.log(parentElem.offsetWidth); 
    var elems = parentElem.getElementsByTagName('*'), i; 
    for (i in elems) { 
    if((' ' + elems[i].className + ' ').indexOf(' ' + 'tile' + ' ') > -1) { 
     var ele = elems[i]; 
     var tile_size = ele.getAttribute('data-grid-size'); 
     var tile_col = ele.getAttribute('data-grid-col'); 
     var tile_row = ele.getAttribute('data-grid-row'); 
     var col_width = (100/this.options.cols); // column width in % 
     var row_height = (parentElem.getElementWidth()/this.options.cols)/this.options.tile_ratio; 
     var left_offset = col_width * tile_col; 
     var top_offset = row_height * tile_row; 
     // Position tiles 
     var currentStyle = ele.getAttribute('style'); 
     ele.setAttribute('style', currentStyle + ' left: ' + left_offset + '%; top: ' + top_offset + 'px;'); 
    } 
    } 
}

見full fiddle here。

因此，有關爲什麼元素寬度未被重新計算的想法？

來源

2014-01-05 Tg7z

這條線從提琴：

window.onresize = gridfill.layoutGrid();

...不分配你的函數作爲調整大小處理程序，它會立即調用你的函數，並嘗試分配的返回值作爲調整大小處理。您需要刪除括號：

window.onresize = gridfill.layoutGrid;

除了保持函數內正確的上下文，你將需要使用：

window.onresize = gridfill.layoutGrid.bind(gridfill);

注意，.bind() function不被IE < = 8的支持，但你可以使用一個polyfill，或者只是將函數調用包：

window.onresize = function() { gridfill.layoutGrid(); };

演示：http://jsfiddle.net/WzaXF/1/

來源

2014-01-05 03:59:19 nnnnnn

非常好的答案非常感謝 – Tg7z

你如何在window.onresize函數重新計算的元件寬度

回答

相關問題