Заполнение div-а div-оми по условию.
Бодрый пень уважаемые. Возник интересен в реализации фичи по заполнению одного большого дива, дивами поменьше при условии того что б их сумарная величина размеров не была больше за величину большого дива.
Приведу код <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. подскажите пожалуйста где я туплю. И ещё вопрос - как этими красными квадратиками заполнить пространство по горизонтале ? |
Black_Star,
делайте пример целиком, а не часьтями и c run |
Black_Star,
строка 26 удваивает предыдущий результат, each ненужен |
Цитата:
<!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> |
заполнить div блоками
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> |
Black_Star,
пост 4 строка 124 full_height = 0; |
Цитата:
// full_height == 27 |
Цитата:
|
Цитата:
Да и Ваша запись var len = (rowHeight/heightOne|0) * (rowWidth/widthOne|0)-1; Тоже мне не понятна. Вы берете площадь размеров большого дива W*H делите на площадь маленького дива w*h узнаете количество возможно вмещаемых маленьких блоков и отнимаете 1. Но что-то в наглядном примере 500px / приблизительно 25px * 500px / приблизительно 25px -1 = 399 блоков и тоже всё пространство не заполнено |
Цитата:
Цитата:
<!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> |
Часовой пояс GMT +3, время: 10:01. |