I gang

jQuery Random Layout Algorithm

Need to create something like [login to view URL] Layout.

This is the sample structure:

<div class="grid-wrapper">

<div class="flex-grid-1">

<span class="flex-item"></span>

<span class="flex-item"></span>

<span class="flex-item"></span>

</div>

<div class="flex-grid-2">

<span class="flex-item"></span>

<span class="flex-item"></span>

</div>

<div class="flex-grid-3">

<span class="flex-item"></span>

<span class="flex-item"></span>

<span class="flex-item"></span>

<span class="flex-item"></span>

</div>

</div>

Basically we have to do these things:

1) Add class to each flex item

2) order and prepend flex-grid class based on random.

3) There are total of 6 css class to be added in flex-item. Lets, say A,B,C,D,E and F class.

There is sized allocated for each class. These are:

A can occupy 100% width

B can occupy 25% of width

C can occupy 50% of width

D can occupy 100% width

E can occupy 50% of width

F can occupy 100% of width

Now, the condition is we can only have following cases in any flex-grid condition items:

A

B+B+B+B

B+B+C

B+B+E

D

E+E

F

How do we do it?

for each first item of flex-item of flex-grid, we randomize to one of any css class(A,B,C,D,E and F) and check which of the following class can still fit in that flex-grid to have width 100%.

For every first item of flex-grid we keep randomizing and add class based on it.

By default I will have infinite loop of post list in my site:

<div class="flex-grid">

<span class="flex-item"></span>

<span class="flex-item"></span>

infinite flex item like above

</div>

So, we have to prepend <div class="flex-grid-3"> based on each random condition.

Let me know if you need more info over it.

EDIT: Also, one more condition is, check if there if image inside flex-item, which is post image.

If has no image, add only class C to the flex-item. The reason we do this is, other than B class flex-item, other class has big size, which we dont want to be empty without image.

////For responsive,

for mobile:

A,C,D,E,F = 100% width

B= 50%

for tablet:

A: 100%

B: 3.33%

C: 75%

D: 100%

E: 75%

F: 100%

As like in desktop, the above mobile and tablet can also only have condition where the width cant except 100%. if it does, we prepend flex-grid to another flex-item which will have again random class, and based on that(if any item is fillable), we add class on next and so on.

Evner: AJAX, Javascript, jQuery, jQuery / Prototype

Se mere: shuffle js pagination, filter grid jquery, masonry filter, masonry js, shuffle js example, jquery filter plugin, cytoscape js layouts, masonry css, hello i need to create a logo and a name to put on my clothing brand, i need to create a video, what do i need to create developer android app company, who do i need to create xml feed, i need to create a logo for my business, know i need to create website, how can i develop my own website or what do i need to create a website, how do i need to create online shopping website, how much do i need to create a website, how much money i need to create an ecommerce website, i need help create a fyler, i need to create a business logo

Om arbejdsgiveren:
( 9 bedømmelser ) Houston, United States

Projekt ID: #19410323

Tildelt til:

fox417

Hi, sir. As a ReactJS expert, I have fully identified your requirements. I did the same jobs as the requirements before. If you hire me, I will do my best and you will be satisfied with my results. Best regards Flere

$50 USD in 10 dage
(3 bedømmelser)
2.5

6 freelancere byder i gennemsnit $53 på dette job

Grisha97924

Hi I understood your requirements. Please contact me. Wish nice experience and skills I will perfect work for the project. Can star the work now. Wishing your kind reply. Thank you for read me. Best regards.

$50 USD in 0 dage
(59 bedømmelser)
6.5
PhungTran

Hi. Can you tell me that: the width of post block is random - just need total width on a row equal to 100% - post list follow order OR post block width can set in admin - need algorithm to arrange post into 100% width Flere

$80 USD in 2 dage
(176 bedømmelser)
5.9
fastestJohn

Hello. I have just read your project. I am really interested in your project now. Because my skills are suitable for your project. I like the "Fastest" and "Perfect". I always complete the project perfectly. Please Flere

$50 USD in 10 dage
(31 bedømmelser)
5.5
grigorywazin

Hi, I’m a senior web developer who are very confident in web frontend design. Your task is very exciting because my ability is very suitable. I have rich experiences in responsive website design using bootstrap and j Flere

$45 USD in 10 dage
(12 bedømmelser)
5.3
bluesea1990

Hi, Andrew here. I'm a licensed full stack web developer and designer. I'm interested in your project, please feel free to check my clients reviews, my profile and if you are interested too, we can discuss more details Flere

$45 USD in 10 dage
(25 bedømmelser)
4.7