Pinterest has a very unique and interesting Dynamic Grid Layout. On Updating or refreshing the Updates automatically arranges themselves. Here in this Tutorial we have implemented the same, Dynamic Message Update into the Pinterest style layout. Without the Page being refreshed, the message is inserted and the Layout rearranges itself to hold the new block.
In this Tutorial we will be doing two very simple things,
- Update a Message dynamically using jQuery and Ajax.
- And, we will Insert the updated message into the Dynamic Grid Layout, and the Grid will automatically adjust to take in the new update.
Pinterest table :
Adding Data to Database
You can yourself add data to the database after creating the above mentioned Table, we advice you to add 10 rows with pid's as (1,2,3,4...10) and respective pin (any message of maximum 200 words).
We have earlier discussed the use of Masonry jQuery for Pinterest Layout in our article Pinterest like Blog Design with Masonry jQuery plugin , in this too we have used the same and we will keep updating this tutorial to include more features like, Comment System, Image Upload, URL fetching in coming weeks. So Stay tuned.