아약스로드 후 1 열로 벽돌로드

내 포트폴리오 항목에 석조물을 사용하고 있습니다. 페이지로 직접 이동하면 타일이 적절한 열에로드됩니다. 그러나 내 웹 사이트는 pjax를 사용하여로드되고 포트폴리오 페이지를로드 할 때 창 크기를 조정할 때까지 모든 porfolio 항목이 하나의 단일 열로로드됩니다.아약스로드 후 1 열로 벽돌로드

같은 masonry는 ajax 요청 후 클라이언트의 너비를 알지 못하고 창 크기를 조정할 때 스냅 아웃됩니다.

누구나 내가 겪고있는 것을 알고있는 석공 술 경험이 있습니까?

출처

2011-10-20 stewart715

온라인 샌드 박스가 없으며 jsfiddle이 없습니다. 오류가있는 위치를 말하기가 어렵습니다. 시작을 위해, Masonry는 레이아웃의 요소 넓이를 필요로하므로, Masonry 콜백을 지연시킬 필요가 있습니다. – Systembolaget

나는 지금 그것을 경험하고있다, 당신은 어떤 해결책을 찾았습니까? 리로드 호출과 별도로? –

ajaxComplete에서 석조 호출을 감싸서 Ajax가로드 된 후에 발생 시키십시오.

$(document).ajaxComplete(function() { 
    console.log("Ajax finished"); //remove this if you want, useful for debugging 
     $(document).ready(function() { 
     $('#content').masonry({ 
     columnWidth: 260, //change this accordingly 
     itemSelector: '.item' 
     }); 
    }); 
});

그냥 직접이 문제를 해결했습니다.

여기

나은 솔루션 :
{ 손가락 : [{ theight 250 thumbUrl "/ 업로드/엄지

$(document).ready(function() { 
     $('#admin_content').masonry({ 
     columnWidth: 260, 
     itemSelector: '.masonry-item', 
     isAnimated:true, 
       animationOptions: { 
        duration: 500, 
        easing:'swing', 
        queue :false 
       } 
     }); 
    }); 
$(document).ajaxComplete(function() { 
    $('#admin_content').masonry('reloadItems').masonry(); 
});

출처

2013-09-15 16:22:16 Vigs

이

$(window).load(function(){ 
var $container = $('#image_gallery'); 
$container.masonry({ 
    columnWidth: 230, 
    itemSelector: '.brick' 
}); 

$.ajax({ 
    url: 'url', 
    type: 'post', 
    success:function(response){ 
     response = JSON.parse(response); 
     if(response.thumbs && response.thumbs.length > 0){ 
      $.each(response.thumbs, function(i, img){ 
       var eleHeight = (img.theight/img.twidth)*220; 
       item += '<div class="brick" style="height:'+eleHeight+'px;width:220px"><a href="#">'; 
       item += '<img src="' + img.thumbUrl + '" /></a></div>'; 
    }); 
    } 
    var $boxHtml = $(item); 
     $container.append($boxHtml).masonry('appended', $boxHtml, true); 
    } 
}); 
});

서버 측 JSON 출력 사용해 /image.jpg " twidth : 167.1875 }] }

참고 : brickWidth 속성을 brick div의 너비와 일치하도록 조정하십시오. (예 : 벽돌 div에 왼쪽 코드가 모두 & 인 경우 위 코드와 같이 총 너비가 220 + 10, 즉 230px입니다.)

출처

2013-12-28 10:14:01

아약스로드 후 1 열로 벽돌로드

답변

관련 문제