Obliczanie wielkości kwadratu

0

Witaj,

mam następujący problem. Chcę w oknie przeglądarki zmieścić określoną (nie zawsze tą samą) liczbę kwadratów. Napisałem pewną funkcję, ale ona nie zawsze działa poprawnie i dlatego prosiłbym Cię o pomoc. W niektórych sytuacjach kwadraty uciekają poza wyznaczony obszar (window.innerWidth, window.innerHeight). Przygotowałem także demo, aby pokazać o co dokładnie mi chodzi (jeżeli wszystkie niebieskie zmieściły się wczerwonym obszarze to proszę, zmniejsz/zwiększ "output").
http://jsbin.com/zagebomitu/edit?js,output

var width = window.innerWidth;
var height = window.innerHeight; 

var count = 26;
var size = cardSize(count);

function cardSize(cardCount) {
 var cardMargin = 26;

 var tmp = height * width / cardCount;
 tmp = Math.floor(Math.sqrt(tmp));
 var perLineWidth = Math.round(width / tmp);
 var sizeWidth = Math.floor(width / perLineWidth - cardMargin);
 var perLineHeight = Math.round(height / tmp);
 var sizeHeight = Math.floor(height / perLineHeight - cardMargin);

 return Math.min(sizeWidth, sizeHeight, 150);
}
0

W jaki sposób chciałbyś tam na przykład trzy kwadraty zmieścić?

0

W taki: http://jsbin.com/zagebomitu/edit?js,output

Postaram się wytłumaczyć inaczej co chcę osiągnąć. Mam prostokąt i wiem ile w nim chcę upchnąć elementów. Moim celem jest obliczenie maksymalnego rozmiaru kwadratu.

0

Bok kwadratu ma długość równą największemu wspólnemu dzielnikowi szerokości i wysokości prostokąta.

0

Proponuję ułatwić sobie życie i zamiast określać na sztywno w js rozmiar marginesu, nadać w css wszystkim elementom atrybut:

box-sizing: border-box;

Podobnie powinieneś najpierw wyzerować marginesy i paddingi. Obliczanie w js wysokości #box też jest bez sensu - od tego jest html i css (atrybut clear):

<!doctype html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            border: 0;
            box-sizing: border-box;
        }
        #box {
            background: red;
        }
        .small {

            background: blue;
            margin: 13px;
            float: left;
        }
        hr {
            clear: both;
        }
    </style>
</head>
<body>

<div id='box'>
    <div id="board"></div>
    <hr/>
</div>

<script>
    var width = window.innerWidth;
    var height = window.innerHeight;

    var count = 10;
    var size = cardSize(count);

    function addSquare(size) {
        var board = document.getElementById('board');
        // reszta kodu dodawania karty
    }

    function cardSize(cardCount) {
        // obliczenie rozmiaru karty
    }

    for(var i = 0; i < count; i++) {
        addSquare(size);
    }
</script>
</body>
</html>
0

Marcin, wielkie dzięki za zainteresowanie, ale niestety nie pomogło. Wydaje mi się, że CSS niewiele tutaj pomoże. Chyba niezbyt jasno wyjaśniłem co chcę osiągnąć.

Mam kontener (prostokąt) znam jego rozmiar, do niego chcę wrzucić zdefiniowaną wcześniej ilość elementów (kwadratów) i chcę aby te kwadraty zajęły całe pole kontenera. Rozmiar kontenera nie jest stały (tzn. uruchamiam raz i ma rozmiar 15x10 następnym razem 12x25 itp, jest powiedzmy, że losowy) i ilość elementów nie jest stała (random). Nie chcę aby elementy miały stałą wielkość.

0

Poprzednio napisałeś

Moim celem jest obliczenie maksymalnego rozmiaru kwadratu.

co wyraźnie sugeruje, że wszystkie kwadraty mają taki sam rozmiar, teraz piszesz o zajęciu całego pola kontenera co, w większości przypadków wymusza różne rozmiary kwadratów. Zdecyduj się, czego chcesz.
I wyjaśnij, co przy kwadratach różnych rozmiarów oznacza zwrot maksymalny rozmiar kwadratu.

0
bogdans napisał(a):

Zdecyduj się, czego chcesz.
I wyjaśnij, co przy kwadratach różnych rozmiarów oznacza zwrot maksymalny rozmiar kwadratu.

OK. Wyrażanie swoich myśli mam na poziomie dwulatka :-) Chcę zająć maksymalny (powiedzmy, że nie zawsze musi to być 100% pokrycia) rozmiar kontenera przy tym, że elementy w nim muszą mieć taki sam rozmiar - dlatego napisałem, że chcę się dowiedzieć jaki największy rozmiar może mieć element. Faktycznie jak teraz na to patrzę to głupio to ująłem.

Mam kontener (prostokąt) znam jego rozmiar, do niego chcę wrzucić zdefiniowaną wcześniej ilość elementów (kwadratów) i chcę aby te kwadraty zajęły całe pole kontenera. Rozmiar kontenera nie jest stały (tzn. uruchamiam raz i ma rozmiar 15x10 następnym razem 12x25 itp, jest powiedzmy, że losowy) i ilość elementów nie jest stała (random). Nie chcę aby elementy miały stałą wielkość.

Mam nadzieję, że teraz już wszystko wyjaśniłem w sposób zrozumiały dla wszystkich, nie tylko dla mnie :P

2

Zakładam, że chodzi o rozmiary w pikselach, zatem wszystkie rozpatrywane wielkości są liczbami całkowitymi.
Niech w i h oznaczają wysokość i szerokość prostokąta (h<=w), a n niech będzie ilością kwadratów. Dla każdej liczby dodatniej i, p_i = ceil(n/i) (dzielenie nie jest całkowite), a_i = min(\frac{w}{p_i},\frac{h}{i}). Szukany bok kwadratu: a = max(a_i), maksimum liczymy po i, dla których i \le p_i.
Kod w Pythonie 2.7

from math import *
w = input("Szerokosc = ")
h = input("Wysokosc = ")
n = input("Ilosc kwadratow = ")
i = 1
a = 0
while True:
    temp = int(ceil(n/float(i)))
    if temp >= i:
        a = max(a,min(w/temp,h/i))
        i = i + 1
    else:
        break
print(a)

1 użytkowników online, w tym zalogowanych: 0, gości: 1