Форум

Black_Star · #1 (**permalink**) 22.10.2016, 10:26

Бодрый пень уважаемые. Возник интересен в реализации фичи по заполнению одного большого дива, дивами поменьше при условии того что б их сумарная величина размеров не была больше за величину большого дива.
Приведу код

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<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>

#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 {
	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;
}

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 > div ").each(function () {

								full_height = $(this).height() + full_height;
						});

						$('#second').append('<div class="one">')

						console.log('sum all Height div-es =' + full_height);

				}

		})
			
}

Я не понимаю почему мой цикл отрисовывает только 7 div-ов хотя по логике должен чуть меньше 20 при данных значениях w/h у класса One. подскажите пожалуйста где я туплю.

И ещё вопрос - как этими красными квадратиками заполнить пространство по горизонтале ?

рони · #2 (**permalink**) 22.10.2016, 10:34

Black_Star,
делайте пример целиком, а не часьтями и c run

рони · #3 (**permalink**) 22.10.2016, 10:45

Black_Star,
строка 26 удваивает предыдущий результат, each ненужен

Black_Star · #4 (**permalink**) 22.10.2016, 10:47

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

делайте пример целиком, а не часьтями и c run

<!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 {
	
	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 > div ").each(function () {

								full_height = $(this).height() + full_height;
						});

						$('#second').append('<div class="one">')

						console.log('sum all Height div-es =' + full_height);

				}

		})
			
}


	
</script>
</body>

</html>

рони · #5 (**permalink**) 22.10.2016, 11: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;*/

  }

  #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 {
  float: left;
  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>
  <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>

рони · #6 (**permalink**) 22.10.2016, 11:44

Black_Star,
пост 4 строка 124

full_height = 0;

Black_Star · #7 (**permalink**) 22.10.2016, 12:08

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

full_height = 0;

Не понял, к чему это ? console.log('full_height = ' + full_height);
// full_height == 27

рони · #8 (**permalink**) 22.10.2016, 12:11

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

Не понял, к чему это ?

попытайтесь понять или проверить хотябы что изменится

Black_Star · #9 (**permalink**) 22.10.2016, 12:26

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

попытайтесь понять или проверить хотябы что изменится

Эмм, я проверил. При замене var full_height = 0; ни чего не поменялось, выводит всё те же 7 блоков. Я не понял почему? Оно не понимает % соотношение сторон ?

Да и Ваша запись var len = (rowHeight/heightOne|0) * (rowWidth/widthOne|0)-1;
Тоже мне не понятна. Вы берете площадь размеров большого дива W*H делите на площадь маленького дива w*h узнаете количество возможно вмещаемых маленьких блоков и отнимаете 1. Но что-то в наглядном примере 500px / приблизительно 25px * 500px / приблизительно 25px -1 = 399 блоков и тоже всё пространство не заполнено

рони · #10 (**permalink**) 22.10.2016, 12:52

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

тоже всё пространство не заполнено

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

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

При замене var full_height = 0; ни чего не поменялось, выводит всё те же 7 блоков.

ой!

<!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 {

  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) {
            full_height = 0;
            $("#second > div ").each(function () {

                full_height = $(this).height() + full_height;
            });

            $('#second').append('<div class="one">')

            console.log('sum all Height div-es =' + full_height);

        }

    })

}



</script>
</body>

</html>

Форум

Справочник

Discord чат

Курсы javascript