Giao diện Vxinh.com theo phong cách Pinterest

Masonry – tạo website ảnh hoặc thời trang giống như Pinterest

Tôi vừa hoàn thành xong bộ code của mình về một trang web chuyên tư vấn thời trang và làm đẹp với phong cách của Pinterest đình đám 😀 Giao diện này tôi dùng thư viện Jquery để sắp xếp các bài viết theo dạng thẻ một cách tự động, cụ thể đó là thư … Tiếp tục đọc Masonry – tạo website ảnh hoặc thời trang giống như Pinterest

Tôi vừa hoàn thành xong bộ code của mình về một trang web chuyên tư vấn thời trang và làm đẹp với phong cách của Pinterest đình đám 😀

Giao diện Vxinh.com theo phong cách Pinterest
Giao diện Vxinh.com theo phong cách Pinterest

Giao diện này tôi dùng thư viện Jquery để sắp xếp các bài viết theo dạng thẻ một cách tự động, cụ thể đó là thư viện Masonry tại đây: http://masonry.desandro.com/

Thực ra không khó để tạo một giao diện thế này, cái khó nhất là Load Unlimit bài viết mỗi khi xuống cuối trang, tôi cứ phải cấu hình mãi mới xong được, cái đó kiểu thế này:

Nếu kéo xuống gần thẻ #Footer, nghĩa là đo khoảng cách của thẻ Footer lên trên cùng của trình duyệt, nếu thấy nó gần tới rồi thì load thêm và chèn vào trong #content, có điều khi chèn vào thì Masoni nó không tự sắp xếp được do nó không nhận DOM, thế là lại phải Refresh lại DOM mới có thể cho Masonry chạy.

Vấn đề Ajax trong WordPress thì không khó, chỉ cần tạo file Ajax.php, rồi include các thư viện chạy của WordPress là có thể như là file của hệ thống rồi, tôi sẽ có bài viết hướng dẫn tạo Ajax.php sau nha !

Chúc cả nhà ngủ ngon !

TÁC GIẢ:

Tôi là Jam, thâm niên 7 năm thiết kế website và làm SEO. Hãy theo dõi blog của tôi để nhận được nhiều chia sẻ thú vị xung quanh chủ đề công nghệ.
Trang chủ / Thủ thuật Wordpress / Giao diện Wordpress / Masonry – tạo website ảnh hoặc thời trang giống như Pinterest

Có 4 bình luận !

  1. Đánh giá ku Hiển thấp thế, coi chừng iển thay đổi xu hướng viết blog bằng cách đi spa hay tắm trắng nhé.. Nhớ đừng vào Cát tường nhé Hiển .. keke

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *