wstawianie bloków numeru w opakowanie zgodnie z wysokością okna w jquery

Question

Wykonałem opakowanie, które ładuje obraz tła i na tej podstawie liczba klocków pojawia się za pomocą pętli for. Szerokość bloków zależy od szerokości okna podzielonej przez 10. Teraz muszę zablokować bloki zgodnie z wysokością okna i pracować nad zmianą rozmiaru okna.

przykładem pracy jsfiddle

[1]: [http://jsfiddle.net/RaVDJ/1/][1] 

Answer 1

Chcesz coś takiego http://jsfiddle.net/slash197/RaVDJ/5/

CSS

html { 
    height: 100%; margin: 0px; padding: 0px; 
} 
body { 
    background: url(http://wallpaperfast.com/wp-content/uploads/2013/05/Beautiful-Beach-Wallpaper.jpg) no-repeat; 
    background-size: auto 100%; 
    height: 100%; margin: 0px; padding: 0px; 
} 

.wrap { 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
} 

.wrap div { 
    float: left; 
    background-color: #cc0000; 
    opacity: 0.5; 
    cursor: pointer; 
    margin: 1px; 
    transition: opacity 0.3s linear; 
} 
.wrap div:hover { 
    opacity: 0; 
} 

HTML

<div class="wrap"></div> 

JS

$(document).ready(function() { 
    addBoxes(); 
}); 
$(window).resize(addBoxes); 

function addBoxes() 
{ 
    $('.wrap').html(""); 

    var size = Math.floor($('.wrap').width()/10); 
    var sizeInner = size - 2; 
    var tw = Math.floor($('.wrap').width()/size); 
    var th = Math.floor($('.wrap').height()/size); 

    for (var i = 0; i < th; i++) 
    { 
     for (var j = 0; j < tw; j++) 
     { 
      $('.wrap').append('<div style="width: ' + sizeInner + 'px; height: ' + sizeInner + 'px;"></div>'); 
     } 
    } 
} 

Answer 2

HTML

CSS

body{background:url(http://wallpaperfast.com/wp-content/uploads/2013/05/Beautiful-Beach-Wallpaper.jpg) no-repeat;background-size:100%;} 
.wrapper{width:100%;} 
.on{opacity:0;cursor:pointer;} 
.block{/*width:100px;height:100px;*/display:block;float:left;} 
.inner-block{display:block;background:rgba(255, 255, 255, 0.4);margin:1px;height:98%;width:98%;} 

JS

$(document).ready(function() { 

// Get scrollbar width 
    function getScrollbarWidth() { 
    var outer = document.createElement("div"); 
    outer.style.visibility = "hidden"; 
    outer.style.width = "100px"; 
    document.body.appendChild(outer); 
    var widthNoScroll = outer.offsetWidth; 
    outer.style.overflow = "scroll"; 
    var inner = document.createElement("div"); 
    inner.style.width = "100%"; 
    outer.appendChild(inner);   
    var widthWithScroll = inner.offsetWidth; 
    outer.parentNode.removeChild(outer); 
    return widthNoScroll - widthWithScroll; 
    } 

// Get scrollbar width 

    var winWidth = $(window).width() - getScrollbarWidth(); 
    var winHeight = $(window).height(); 


    var winRatio = winWidth/winHeight; 
    //alert(winWidth); 
    var numBlock = (winWidth/10); 

    var blockHeight = numBlock; 
    var i; 
    for(i=0;i<numBlock;i++){ 

      $('.wrapper').append('<div class="block"><div class="inner-block"></div></div>'); 
      $(".block").css({"width":numBlock +'px', "height":blockHeight +'px'}); 
     } 
    $(function(){ 
    $(".block").hover(function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.addClass("on"); 
     }, 100) ; 
     },function(){ 
     var elem = $(this); 
     setTimeout (function(){ 
      elem.removeClass("on"); 
     }, 200) ; 
    }) 
    }); 

    $(window).resize(function(){ 

var winWidth = $(window).width() - getScrollbarWidth(); 
var winHeight = $(window).height(); 
var winRatio = winWidth/winHeight; 
//winRatio = Math.min(winRatio, 1.0); 
$(".block").width($(".block").width()*winRatio); 
$(".block").width($(".block").height()*winRatio); 


           }) 

}); 

Example