Home > Enterprise >  How to tell mathematically which line i should start making the grid with
How to tell mathematically which line i should start making the grid with

Time:07-14

I'm about to make a photos grid that its lines contain alternatively 2 and 3 photos using javascript. The question is: How to tell mathematically which line i should start making the grid with (a line with 2 photos or 3) in order to prevent that the last line contains 1 photo

| 2 photos | ..  |
| -------- |-----|
| 3 photos | ... |
| -------- |-----|
| 4 photos | ..  |
|          | ..  |
| -------- |-----|-----|
| 5 photos | ..  | ... |
|          | ... | ..  | 
| -------- |-----|-----|
| 6 photos | ... |
|          | ... |
| -------- |-----|
| 7 photos | ..  |
|          | ... |
|          | ..  |
| -------- |-----|
| 8 photos | ... |
|          | ..  |
|          | ... |
| -------- |-----|
| 9 photos | ..  |
|          | ... |
|          | ..  |
|          | ..  |
| -------- |-----|-----|
| 10 photos| ..  | ... |
|          | ... | ..  |
|          | ..  | ... |
|          | ... | ..  |
| -------- |-----|-----|
| 11 photos| ... |
|          | ..  |
|          | ... |
|          | ... |
| -------- |-----|-----|
| 12 photos| ..  | ... |
|          | ... | ..  |
|          | ..  | ... |
|          | ... | ..  |
|          | ..  | ..  |
| -------- |-----|-----|
| 13 photos| ..  | ... |
|          | ... | ..  |
|          | ..  | ... |
|          | ... | ..  |
|          | ... | ... |
| -------- |-----|-----|
| 14 photos| ..  |
|          | ... |
|          | ..  |
|          | ... |
|          | ..  |
|          | ..  |
| -------- |-----|-----|
| 15 photos| ..  | ... |
|          | ... | ..  |
|          | ..  | ... |
|          | ... | ..  |
|          | ..  | ... |
|          | ... | ..  |
| -------- |-----|-----|

edited

| -------- |-----|-----|
| 7 photos | ..  | ... |
|          | ... | ..  |
|          | ..  | ..  |
| -------- |-----|-----|

CodePudding user response:

As you alternate 2 and 3 photos, what matters is the total modulo 5. (operator %)

With N = Math.floor(total / 5) (whole division)

If total % 5 = 0 => you can start with either 2 or 3. You'll have 2N rows.

If total % 5 = 1 => start with 3. You'll have 2N rows, and the last one will be 3 (not 2).

If total % 5 = 2 => start with 2. You'll have 2N 1 rows.

If total % 5 = 3 => start with 3. You'll have 2N 1 rows.

If total % 5 = 4 => start with 2. You'll have 2N 2 rows, and the last one will be 2 (not 3).

Only case this doesn't work is if you have only one photo.

  • Related