Цитата:
 Новый Ваш пример работает болие правильно. Но всё равно, оно выводит 21 блок, хотя по идее если большой блок 500х500px а маленький 25х25px (5% х 5%) то по логике while (rowHeight > full_height) оно должно б было вывести 20 или даже 19 блоков. (Что в принципе видно визуально) |
Цитата:
Цитата:
вставить фото кнопка  |
Цитата:
Ну я и в других просмотрел, В ФФ и Опере видно нормально. Заполняет всё как надо, а в Хроме чё-то недозаполняет. А вот последний пост прогнал по всем своим браузерам, так там во всех одно и тоже 21 блок     |
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>
|
Цитата:
Ещё вопрос по горизонтальному заполнению. Как сделать что б генерируемый код выглядел так: <div id="square"> <div id="minSquare"> <div class="column"> <div class="one"></div> <div class="one"></div> <div class="one"></div> <div class="one"></div> <div class="one"></div> ++++ И так далие, пока сумма heigh div-s class="one" < Heigh div id="minSquare" +++ </div> <div id="column"> ~ div-s class="one"~ </div> Количество дивов <div id="column"> с потомками "one" должно быть столько что б они перекрывали по ширине div id="minSquare" </div> </div> Выглядеть приблизительно так. Единственное что перекрытие у каждого нового <div id="column"> z-index +1   Тут у меня проблема возникла в том что у меня class="column" имеет .column { position: absolute; height: 100%; width: 100%; } и каждый новый столбец должен иметь смещение по горизонтале а каждый парный ещё и по вертикале var newZindex = 1; // каждый новый столбец перекрывает предыдущий var newMarginLeft = 4; // смещение каждого столбца вправо на 4% var newMarginTop = -2; // каждый парный div с классом colomn должен подниматься вверх на -2%; $('.column').css({ "margin-left" : "newMarginLeft" * i + "%" , "margin-top" : "newMarginTop" * i + "%" , // тут у меня вопрос как проверять на четность. Думал как-то привязать к z-index "z-index" : "newZindex" * i }); Ещё вопрос как сделать проверку на то что б сумма ширины всех колонок с классом .column была меньше ширины div id="minSquare", была мысль как Вы сделать var len = (rowWidth/widthOne|0); for (var i=0; i<len; i++) но тут такое не прокатит, я ведь пишу .column {width: 100%;}, да и абсолютное позиционирование + они на разных уровнях z-index .вообщем Одни вопросы. |
Black_Star,
пас ... вам к специалисту по css |
Black_Star,
на последок ... :)
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<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;*/
display: flex;
flex-wrap: wrap;
}
.one {
float: left;
box-sizing: border-box;
width: 5%;
height: 5%;
background-color: red;
border: 1px solid black;
}
.one:nth-child(2n) {
margin-top: -4px;
z-index: 10;
margin-left: -2px;
}
.one:hover {
/*perspective: 100px;*/
transform-origin: right;
transition: transform 0.5s;
transform: rotateY(60deg);
background-color: white;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script>
$(function() {
var div = $('#minSquare');
var rowWidth = div.width();
var rowHeight = div.height();
var one = $('<div>',{'class' : 'one'}).appendTo(div);
var widthOne = one.outerWidth(true);
var heightOne = one.outerHeight(true);
var len = (rowHeight/heightOne|0) * (rowWidth/widthOne|0)-1;
for (var i=0; i<len; i++) {
div.append(one.clone())
}
})
</script>
</head>
<body>
<div id="square">
<div id="minSquare"></div>
</div>
</body>
</html>
|
Спасибо за помощь. Вот что на выходи вышло :)
https://codepen.io/BlackStar1991/pen/JRVRYm |
| Часовой пояс GMT +3, время: 19:03. |