jQuery Masonry와 Ajax 추가 아이템?

jQuery Masonry와 Ajax 추가 아이템?

몇 가지 아이템을 추가하기 위해 Ajax와 jQuery Masonry 플러그인을 사용하려고 합니다만, 어떤 이유에서인지 새로운 아이템이 masonry를 적용받지 못했습니다.

사용하고 있다

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

그러나 이후에 추가되는 항목에는class="masonry-brick"적용된다는 것은 그들이 완전히 위치를 채운다는 것을 의미합니까?

보아하니masonry함수는 원시 HTML 문자열이 아닌 jQuery 개체를 두 번째 매개 변수로 예상합니다.success callback 파라미터를 다음과 같이 정리하면 이 문제를 해결할 수 있습니다.

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            var el = jQuery(html);
            jQuery("#content").append(el).masonry( 'appended', el, true );
        }
    });
});

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

솔루션

같은 문제가 발생하여 다음 행(코드로 변환)을 사용했습니다.죄송해요, 어디서 찾았는지 기억이 안 나요.

코드에서 다음을 바꿉니다.

jQuery("#content").append(el).masonry( 'appended', el, true );

이것으로:

jQuery("#content").append(el).masonry( 'reload' );

http://masonry.desandro.com/methods.html

success: function (response) {
  if(response.length > 0) {
     var el = js(response); 
     setTimeout(function () {
       js("#masonry").append(el).masonry( 'appended', el).masonry('layout');
     }, 500);
  }
}   

난 괜찮아.

팔로잉은 나에게 효과가 있었다.웹 페이지에서 load more 버튼을 클릭하면 html 항목 세트를 반환하는 ajax가 있습니다(ajax에서 부분 보기를 반환).다음은 동적으로 생성되는 부분 보기입니다.

foreach (var item in Model.SocialFeedList)
{
        <div class="grid-item">
            <div class="grid-inner">
                <div class="img-holder" style="background-image:url(imageURLHere)">
                </div>
                <div class="content-area">
                    <h3><a target="_blank" href="SomeLink">TitleOfTheLink</a></h3>
                    <p>SomeDescription</p>
                    <h5 class="date"><span>Published</span>: 2016/07/13</h5>
                </div>
            </div>
        </div>
}

success callback ajax 메서드에서는 아래의 작업을 수행했습니다.여기서 "response"는 위의 html에서 얻은 html 항목의 집합입니다.여기서 "divFeedList"는 html 요소 세트를 표시하는 루트 요소입니다.

jQuery("divFeedList").append(response).masonry('reloadItems', response, true).masonry();

답이 불분명하면 알려주세요.

다음에 다음 코드를 추가했습니다.append모든 것이 정상이었다.

$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
});

이유:

이미지가 언로드되면 메이슨리 레이아웃이 지워지고 항목 요소가 겹칠 수 있습니다.images Loaded를 사용하면 이 문제가 해결됩니다.images Loaded 는 imagesloaded.desandro.com 에서 다운로드할 수 있는 개별 스크립트입니다.

원천

메이슨리 레이아웃 콜이 누락되었습니다.문서에 따르면 레이아웃을 새로 고치는 데 필요한 경우.masonry()(예를 들어) 모든 변경 후에.masonry('appended')):

$grid.masonry()
  .append(elem)
  .masonry('appended', elem)
  // layout
  .masonry();

(출처 : http://masonry.desandro.com/methods.html)

나는 내 ajax 리스트에도 같은 문제가 있었다. 나는 전화로 그것을 해결할 수 있었다.reloadItems&layoutsajax 응답 후 함수:

var mediaItemContainer = $( '#container' );
mediaItemContainer.masonry( {
    columnWidth:  '210px',
    itemSelector: '.item'
} );
$( mediaItemContainer ).prepend( '<div class="item">foo</div>' );
$( mediaItemContainer ).masonry( 'reloadItems' );
$( mediaItemContainer ).masonry( 'layout' );

이 솔루션은 나에게 효과적입니다.-

  jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    dataType: 'json',
    cache: false,
    success: function(response) {
      if (response.length > 0) {
        var $container = $('#container');
        var msnry = $container.data('masonry');
        var elems = [];
        var fragment = document.createDocumentFragment();
        for (var x in response) {
          var elem = $(response[x]).get(0);
          fragment.appendChild(elem);
          elems.push(elem);
        }
        $container.appendChild(fragment);
        msnry.appended(elems);
      }
    }
  });

이 문제를 발견한 미래 사용자 및 위의 솔루션은 해당 사용자에게는 적합하지 않습니다.셀렉터와 추가한 요소에 동일한 케이스가 없는 문제가 발견되었습니다.itemSelector이었다.Card하지만 나는 추가했다.<div class="card">.

이게 도움이 됐으면 좋겠다.

https://masonry.desandro.com/methods.html#prepended에 명확하게 설명되어 있습니다.

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            jQuery("#content").append(html).masonry( 'appended', html, true );
        }
    });
});

안에서success function는 '아 '아'는 '아', '아'는 '아', '아'는 '아', '아'는 '아', '아'는 '아', '아', '아'는 '아', '아', '아'는 '아', '아', '아'는 '아', '아'로jquery object 붙여서 붙입니다.html() ★★★★★★★★★★★★★★★★★」append().

var $content = $( html );
jQuery("#content").append($content).masonry( 'appended', $content );

최종 코드는 다음과 같습니다.

jQuery.ajax({
    type: "POST",
    url: ajax_url,
    data: ajax_data,
    cache: false,
    success: function (html) {
        if (html.length > 0) {
            var $content = $( html );
            jQuery("#content").append($content).masonry( 'appended', $content );
        }
    });
});

Masonry v3.2.2(이 투고 시점에서의 최신 버전)에서는 다음과 같이 동작합니다.

newHtml이 다음과 같은 문자열이라고 가정합니다.

<li>item 1</li><!--split-->
<li>item 2</li><!--split-->
<li>item 3</li>

다음과 같이 처리합니다.

$.get(apiUrl, function(newHtml) {
    var textArr = newHtml.split("<!--split-->");
    var elArr = [];
    $.each(textArr, function(i,v) {
        if (v) {
            elArr.push($(v)[0]);
        }
    });
    $(this).append(elArr);
    $container.waitForImages( function() {
        $container.masonry('appended', elArr);
    });
}

이걸 알아내는데 2시간이나 걸렸어!

나한테 잘 맞는 해결책을 찾았어 매 0.5초마다 석조 건물의 배치를 다시 로드해

//initialization of a masonry object:

var msnry = new Masonry("#container",{
itemSelector: '#post',
gutter: 15
}); 

//thread that makes the magic happens:

setInterval(function(){
msnry.reloadItems();
msnry.layout();
},500);

이렇게 하면, 에이잭스를 사용해서 물건을 추가할 수 있고, 여기 석조 건물 레이아웃이 있습니다.

언급URL : https://stackoverflow.com/questions/8722197/jquery-masonry-and-ajax-append-items