10 lưới jQuery hấp dẫn nhất
jQuery thường là lựa chọn đầu tiên cho hầu hết những người muốn nhúng chân vào lập trình JavaScript vì nó cung cấp một phương pháp dễ dàng để chọn các phần tử HTML và thao tác với DOM. jQuery cực kỳ phổ biến, theo số liệu thống kê gần đây của W3Techs, “jQuery được sử dụng bởi 95,4% trong số tất cả các trang web có thư viện JavaScript mà chúng tôi biết.”
jQuery cũng được nhiều thư viện JavaScript sử dụng như một phần phụ thuộc và phiên bản alpha của bản phát hành chính mới, jQuery 3.0 đã xuất hiện ở đó. Nếu dự án của bạn sử dụng jQuery theo bất kỳ cách nào và bạn muốn bố trí năng động, linh hoạt đối với thiết kế của bạn, đáng để xem xét bao gồm một plugin lưới jQuery vào ngăn xếp lối vào của bạn.
Làm thế nào để lưới jQuery làm việc?
Lưới jQuery cho phép bạn tạo bố cục giống như Pinterest cho trang web của bạn. Chúng hoạt động như một ma trận ảo, chúng tuân theo “hộp bên trong một hộp” nguyên tắc. Các lưới jQuery tự động tính toán đâu là cách sắp xếp các mục tốt nhất và điền vào trang theo cách để lại không gian trống ít nhất, giống như những gì bạn thấy trong các hộp này ở đây.
Ưu điểm chính của lưới jQuery so với lưới CSS là chúng hoạt động với hình ảnh hoặc các yếu tố truyền thông khác có chiều rộng và chiều cao khác nhau. Các hiệu ứng JavaScript thú vị cũng là một lý do lớn để sử dụng lưới jQuery để tạo bố cục hiện đại.
Trong bài viết này, bạn có thể đọc về 10 lưới jQuery hấp dẫn nhất hiện đang có mặt trên thị trường - tất nhiên, giống như jQuery, tất cả chúng đều là nguồn mở và miễn phí.
1. jQuery lồng nhau
jQuery Nested cung cấp cho bạn một tiện dụng bố trí lưới nhiều cột đáp ứng và hoạt động trên tất cả các loại thiết bị. Plugin jQuery này tự quảng cáo là hoàn toàn không có khoảng cách. Lúc đầu, khẩu hiệu này nghe có vẻ như là một mẹo tiếp thị rẻ tiền nhưng plugin thực sự hoàn thành việc tự do khoảng cách rất độc đáo, giống như những người tạo ra nó đã hứa.
jQuery Nested tuân theo một tập lệnh duy nhất trong xây dựng ma trận lưới. Đầu tiên, nó tạo ra một lưới nhiều cột, sau đó nó quét ma trận cho các khoảng trống và lấp đầy chúng bằng cách sắp xếp lại các phần tử khác nhau. Cuối cùng - và đó là bước làm cho lưới này không có khe hở - nó thay đổi kích thước bất kỳ phần tử nào ở hàng dưới cùng không phù hợp với khoảng trống.
2. Vách ngăn
Freewall cho phép bạn tạo bố cục bạn muốn cho dù đó là lưới hình ảnh, lưới lồng nhau, lưới xây hay lưới kiểu tàu điện ngầm. Nó có nhiều tùy chọn mà bạn có thể đặt làm các biến JavaScript như máng xối, máng xối, animate, cellW, cellH, vv Nó có các sự kiện tùy chỉnh như trênGapFound và kích thước, và phương pháp tùy chỉnh là tốt.
Bạn có thể tìm thấy các ví dụ mã đẹp trên trang web của họ. Các nhà phát triển cũng quan tâm đến những linh hồn nghèo khổ vẫn phải thiết kế cho các trình duyệt cũ hơn, vì vậy Freewall hỗ trợ Internet Explorer 8, và nó cũng có một giải pháp cho JavaScript bị vô hiệu hóa, vì nó sử dụng Hoạt hình CSS 3 như một chiến lược dự phòng JS. Kiểm tra bài viết của chúng tôi trên Freewall tại đây.
3. Xây dựng
Tên của Masonry cũ tốt phải quen thuộc với tai của mỗi nhà thiết kế có kinh nghiệm. Trong trường hợp bạn chưa nghe về nó, Masonry là một thư viện bố trí lưới tầng hoạt động với cả jQuery và vanilla JavaScript.
Plugin tiện dụng này là cơ sở của nhiều chủ đề WordPress phổ biến. Bạn thậm chí không phải tải nó lên máy chủ của mình vì bạn có thể dễ dàng liên kết thư viện trực tiếp từ CDN.
>
