Tạo images layout giống như Unsplash

Chào mọi người, như đề cập ở trên hiện tại mình đang thử làm 1 web ảnh sử dụng api của Unsplash. Nhưng vẫn đang ko hiểu sao Unsplash lại tạo được layout như vậy. Mình đã thử nhiều cách như sử dụng bootstrap card-group nhưng như vậy thì khi infinite loading nó sẽ load ảnh mới vào column thứ 3 chứ ko load theo chiều ngang. Còn 1 cách còn lại là tạo 3 column và gọi 3 lần api load ảnh với trang khác nhau nhưng như thế thì rất tốn api (vì api của unsplash chỉ cho max rate 50 calls/hours) và optimize không được tốt lắm. Ko biết trong đây có ai có cao kiến gì ko :frowning:

Đây là link Unsplash: https://unsplash.com
Còn đây là link lấy api : https://unsplash.com/developers

1 Like

Dựa vào kích thước màn hình mà Unsplash sẽ chia 1, 2 hay 3 cột. Sau đó tính toán chiều cao của mỗi cột để xác định các ảnh tiếp theo sẽ xếp vào đâu.
Nếu dùng cách này cũng không thể tốn api hơn được, vì bạn lấy tất cả ảnh về rồi mới bắt đầu xếp, chứ không phải lấy từng ảnh và xếp từng ảnh. :thinking:
Tuy nhiên bạn có thể dùng các thư viện JavaScript tạo grid layout có sẵn, ví dụ Masonry sẽ dễ dàng hơn.

4 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?