How do i create a logic for dynamic product list page like below using php and bootstrap?

Question

The big image is catalog or ad blocks that comes from catalog table. And small images are the actual products block that comes from product table.

There may be more products and more catalog. attached image is just a layout sample.

Please refer the below image link for layout.

Answer 1

You can create a pagination part for php for fetching data per window height and may decide a minimum number of content per page for both ad and product.

After that most of your work is done by javascript ajax request to that php file according to user scroll atleast that much so that it will count as next page.

Answer 2

• Let PHP serve a paginated list of your catalog items at /catalog/items?start=20&length=50
• Bootstrap's columns are used on your HTML elements' class attributes; this enables resize of the viewport to properly flow the columnes
• You'll also need something in JS that fetches data and renders: https://cassetterocks.github.io/react-infinite-scroller/ for example. Here you make loadMore call into the PHP endpoint you defined above.