inserire blocchi numerici nell'involucro in base all'altezza della finestra in jquery

Question

Ho creato un wrapper che carica un'immagine di sfondo e sul fatto che ci sono numerosi blocchi che appaiono con l'aiuto di un ciclo for. La larghezza dei blocchi dipende dalla larghezza della finestra divisa per 10. Ora ho bisogno di rendere i blocchi da limitare in base all'altezza della finestra e lavorare sul ridimensionamento della finestra.

esempio di lavoro jsfiddle

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

Answer 1

Vuoi qualcosa di simile 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