Einfügen von Blöcken in Wrapper entsprechend der Fensterhöhe in jquery

Question

Ich habe einen Wrapper gemacht, der ein Hintergrundbild lädt und auf dem die Anzahl der Blöcke mit Hilfe einer for-Schleife erscheint. Die Breite der Blöcke hängt von der Fensterbreite ab, die durch 10 geteilt wird. Jetzt muss ich die Blöcke entsprechend der Höhe des Fensters begrenzen und an der Größe des Fensters arbeiten.

Arbeitsbeispiel jsfiddle

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

Answer 1

Wollen Sie so etwas wie dieses 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