Gọi lại Jquery với công cụ xây dựng

Question

Tôi có nút chuyển đổi cơ bản hiển thị số lần nhấp trên div trong khi đóng tất cả các div tương tự khác. Điều này hoạt động tốt, việc chuyển đổi không phải là vấn đề. Xem bên dưới:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle('slow'); 
    $(this).toggle('slow'); 
    $('.littleme').not(this).next().hide('slow'); 
    $('.littleme').not(this).show('slow'); 
    return false; 
}).next().hide(); 
}); 

Tôi cũng đã sử dụng plugin Masonry cho jQuery, tổ chức tất cả các phần tử div được chọn horrizontally và sau đó theo chiều dọc. Rực rỡ hoạt động tốt cho tất cả các loại chiều cao div khác nhau. Xem bên dưới:

$(function(){ 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible', 
}); 
}); 

Điều tôi muốn làm là sắp xếp lại bố cục mỗi khi div mở rộng hoặc thu gọn. Có hiệu lực kích hoạt lệnh .masonry dưới dạng gọi lại cho hàm .click ban đầu. Đây là những gì không làm việc cho tôi. Ứng dụng cho câu hỏi của người mới bắt đầu.

Xem cách hiện của nó làm việc ở đây: kalpaitch.com

Andrew

Gaby - Cảm ơn bạn kiểm tra cú pháp, tôi khá giỏi fluffing những lên và sau đó dành khoảng nửa tiếng đồng hồ chạy quanh tìm kiếm cho họ.

Cyro - Thats hoàn hảo và hoạt động, tôi sẽ sử dụng tính năng này trong tương lai gần. Những gì tôi đã dự định để thêm vào là làm thế nào điều này sẽ đạt được trong trường hợp hiển thị/ẩn/toggling này VỚI một tốc độ hình ảnh động (mã trên thay đổi cho phù hợp). Sau đó, các cuộc gọi nề sẽ bắn trước khi divs được mở rộng (như hiện đang xảy ra tại kalpaitch.com). Rất cám ơn câu trả lời mặc dù, nó chắc chắn dễ dàng hơn theo cách này.

Answer 1

Hãy thử lại chạy cuộc gọi nề đến lại điều chỉnh trang sau khi các thay đổi nhấp chuột giải quyết:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle(); 
    $(this).toggle(); 
    $('.littleme').not(this).next().hide(); 
    $('.littleme').not(this).show(); 

    // re-run masonry 
    $('#mainContent').masonry({ 
    columnWidth: 200, 
    itemSelector: '.threadWrapper:visible' 
    }); 

    return false; 
}).next().hide(); 
}); 

EDIT: Xem tài liệu Masonry có vẻ như sẽ lưu cài đặt ban đầu của bạn để bạn chỉ cần gọi lại phương thức chính. Điều này cũng sẽ hoạt động:

$(document).ready(function(){ 
$('.threadWrapper > .littleme').click(function() { 
    $(this).next().toggle(); 
    $(this).toggle(); 
    $('.littleme').not(this).next().hide(); 
    $('.littleme').not(this).show(); 

    // re-run masonry 
    $('#mainContent').masonry(); 

    return false; 
}).next().hide(); 
}); 

Answer 2

Bạn có một con đường sai lầm mà bạn bao gồm các tập tin masonry.js ..

bạn sử dụng js/jquery.masonry.js khi nó phải được JS/jquery.masonry.js (vốn JS)

và bạn có thừa một dấu phẩy (,) tại cuối các tùy chọn để bạn vượt qua nề ..

Sau khi bạn sửa chữa những sai sót trong ví dụ của bạn, chỉ cần chạy mã nề một lần nữa như Cryo đề cập trong câu trả lời của mình ...

Answer 3

Tôi cũng đã chuyển đổi và không thể xây lại để tải lại cho hiệu ứng đó. Nhưng tôi đã nhận được nề để tải lại khi các mặt hàng đã bị mờ dần (được lọc).

Xem: http://jasondaydesign.com/masonry_demo/

Answer 4

Nó được một thời gian, nhưng kể từ khi tôi tiếp tục nhấn vào câu hỏi của bạn trong khi tìm kiếm cái gì khác, tôi muốn thêm ở đây rằng Masonry thêm một chức năng .reload. Tính năng này hoạt động với tôi:

 $(window).resize(function(){ 
      var wallWidth = $wall.width(); 
      var width  = $(window).width(); 
      if (width<700) { 
        $('.brick').css('width', wallWidth/1); 
        $wall.masonry('option', { columnWidth: wallWidth/1 }); 
        $wall.masonry('reload'); 
      } else if (width>=700 && width<1024) { 
        $('.brick').css('width', wallWidth/2 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/2 }); 
        $wall.masonry('reload'); 
      } else if (width>=1024) { 
        $('.brick').css('width', wallWidth/3 - 1); 
        $wall.masonry('option', { columnWidth: wallWidth/3 }); 
        $wall.masonry('reload'); 
      } 
     });