Форум

Black_Star · #11 (**permalink**) 22.10.2016, 13:02

Сообщение от рони

тоже всё пространство не заполнено
в примере всё заполнено или нет? пост №7

Если Вы имели ввиду Ваш пост №5 то там тоже не всё заполнено

Новый Ваш пример работает болие правильно. Но всё равно, оно выводит 21 блок, хотя по идее если большой блок 500х500px а маленький 25х25px (5% х 5%) то по логике while (rowHeight > full_height) оно должно б было вывести 20 или даже 19 блоков. (Что в принципе видно визуально)

рони · #12 (**permalink**) 22.10.2016, 13:27

Сообщение от Black_Star

Если Вы имели ввиду Ваш пост №5 то там тоже не всё заполнено

в каком браузере???

Сообщение от Black_Star

маленький 25х25px

это ваши предположения -- смотрите пост 5
вставить фото кнопка

Black_Star · #13 (**permalink**) 22.10.2016, 13:42

Сообщение от рони

в каком браузере???

Chrom Версия 53.0.2785.143 m (64-bit)
Ну я и в других просмотрел, В ФФ и Опере видно нормально. Заполняет всё как надо, а в Хроме чё-то недозаполняет.
А вот последний пост прогнал по всем своим браузерам, так там во всех одно и тоже 21 блок

рони · #14 (**permalink**) 22.10.2016, 14:49

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>

Black_Star · #15 (**permalink**) 23.10.2016, 08:47

Сообщение от рони

более помочь ничем не могу, в моих браузерах пост 5 работает нормально выводит 400 маленьких блоков.
21 блок выводит ваш код, потому что условие и размеры неправильно считаются.
строка 47 и строки 117 -123 ... медитируйте

Да, спасибо. Ваш код работает идеально. Отображает как раз 20 блоков.
Ещё вопрос по горизонтальному заполнению.

Как сделать что б генерируемый код выглядел так:
<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 .вообщем Одни вопросы.

рони · #16 (**permalink**) 23.10.2016, 09:28

Black_Star,
пас ... вам к специалисту по css

рони · #17 (**permalink**) 23.10.2016, 09:43

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>

Black_Star · #18 (**permalink**) 26.10.2016, 14:32

Спасибо за помощь. Вот что на выходи вышло

https://codepen.io/BlackStar1991/pen/JRVRYm

Форум

Справочник

Discord чат

Курсы javascript