I gang

jQuery Random Layout Algorithm -- 2

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 class="flex-grid-2">

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

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


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



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:








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


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: random sentence algorithm, jquery mysql layout, including jquery messes layout, jquery random digit number, jquery slider layout, jquery ui layout, layout algorithm mathematica farsi, jquery portal layout, size patio random layout, jquery chat layout, jquery sliding layout, jquery admin layout, jquery seating layout, jquery accordion layout, jquery online layout design, jquery random splash, jquery random images, random layout, magazine layout algorithm, i need to change my life but i don't know how

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

Projekt ID: #22769298

8 freelancere byder i gennemsnit $49 på dette job


Hi, My name is Heorhii (George), I've read the description and everything looks pretty straight forward. Please tell me how much time do I have? It shouldn't be a lot but asking just in case. I don't have current pro Flere

$40 USD på 1 dag
(11 bedømmelser)

Hello ! Hope you are doing well! can you please come in chat box to discuss the project i am available and ready to start the project I am good at : - Custom PHP, Laravel, CI, NodeJs - HTML5 + CSS3 Styling, Bootstrap Flere

$40 USD på 1 dag
(44 bedømmelser)

Dear Client! I am very happy to see your project detail. I think it is just my project. :) I read your requirement carefully and understood fully. I am sure I can do your project. As you can see my profile, https://ww Flere

$30 USD på 1 dag
(14 bedømmelser)

Hello, how are you? As a jqurery expert with abundant experience, I'm glad to see your project. I can do my best to help you. Your project is very suitable for me, hope your good response. Thanks.

$100 USD in 7 dage
(9 bedømmelser)

I have 5 years experience building dynamic and responsive websites using HTML, PHP, MySQL, CSS, jQuery, and AJAX. My areas of expertise are in building web apps using PHP, MySQL,Wordpress,CodeIgniter, Laravel 4-5, Vue. Flere

$100 USD in 7 dage
(3 bedømmelser)

**Hello** Thanks to post a project. I reviewed you noted and feel confidence with your project now. I can start your project anytime you want and deliver full project in time. Can I help you? Thanks.

$30 USD på 1 dag
(4 bedømmelser)

Hello and thank you for considering me for this position! after carefully reading the project details, this is a project I can take to completion because: - I have experience with frontend languages like html, css and Flere

$20 USD in 3 dage
(0 bedømmelser)

Hi, I'm a senior web developer and have good understanding on html structure and javascript-jquery coding. Please contact me on chat if you like to work to discuss more about technical details. best regards.

$30 USD in 3 dage
(0 bedømmelser)