Black_Star,
более помочь ничем не могу, в моих браузерах пост 5 работает нормально выводит 400 маленьких блоков.
21 блок выводит ваш код, потому что условие и размеры неправильно считаются.
строка 47 и строки 117 -123 ... медитируйте
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Squama</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<style type="text/css">
#square {
width: 600px;
height: 600px;
border: 1px solid black;
}
#minSquare {
position: relative;
margin: 5%;
width: 500px;
height: 500px;
border: 1px solid black;
background-color: yellow;
/*overflow: hidden;*/
}
#first {
position: absolute;
height: 100%;
width: 500px;
margin-top: -2%;
z-index: 1;
}
#second {
position: absolute;
height: 100%;
width: 500px;
margin-left: 4%;
z-index: 2;
perspective: 200px;
}
.one {
box-sizing: border-box;
width: 5%;
height: 5%;
background-color: red;
border: 1px solid black;
}
.one:hover {
/* */
/*perspective: 100px;*/
transform-origin: right;
transition: transform 0.5s;
transform: rotateY(60deg);
background-color: white;
}
</style>
</head>
<body>
<div id="square">
<div id="minSquare">
<div id="first">
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
<div class="one"></div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = function() {
$(function() {
$("#minSquare").append('<div id="second">');
$("#second").css({
"width": "100%",
"height": "100%"
});
var widthOne = $(".one").width();
var heightOne = $(".one").height();
console.log("width of One block =" + widthOne);
console.log("heigh of One block =" + heightOne);
var rowWidth = $("#second").width();
var rowHeight = $("#second").height();
console.log("all Long #second = " + rowHeight);
var full_height = $(".one").outerHeight();
while (rowHeight > full_height) {
$("#second").append('<div class="one">');
full_height = 0;
$("#second > div ").each(function() {
full_height += this.offsetHeight
})
}
})
};
</script>
</body>
</html>