How do you solve the masonry problem?



  • There's a tape of news, it's out of vk.com. With help http://masonry.desandro.com/ They're building news like bricks. If the content inside the news takes more than 500px, there's an open button. The evidence on the button opens the news completely. I'll close at the re-clique.

    There's a button "load more." There's five news on the evidence, Ajax. But it doesn't work on the first five news button. And the ones that are downloaded are working. Of course, after I got the news, I'll reset everything.

    It's worse. If we press again, there's five more news on the button. In this 5k and the 1st 5k, everything works, but it doesn't work in the last 5k.

    I'm making reference to what I did. http://goo.gl/a3KlLg

    I'm confused. ♪ ♪

    $(document).ready(function(){
    //запуск masonry
    $('.grid').imagesLoaded(function() {
      $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        gutter: '.gut',
        percentPosition: true
      });
      // если высота больше 500, то удалить кнопку "раскрыть"
      $(".grid-item div").each(function(){
        if ($(this).height() < 500){
        $(this).children(".expan").remove();
        }
      });
    });
    

    // функция раскрыть/скрыть
    $(".grid-item .expan").click(function(){
    $(".grid .grid-item").css({"maxHeight": "500px"});
    $(".grid-item .expan").text("раскрыть");

    if ($(this).parent().parent().attr("class") == 'grid-item inn'){
    $(this).parent().parent().removeClass('inn').css({"maxHeight": "500px"});
    }
    else {
    $('.grid-item').removeClass('inn');
    $(this).text("скрыть");
    $hei = $(this).parent().height();
    $hei += 50;
    $(this).parent().parent().addClass('inn').css({"maxHeight": $hei + "px", "height": $hei + "px"});
    }
    $('.grid').imagesLoaded(function() {
    $('.grid').masonry();
    });
    });

    $("#imgLoad").hide(); // Скрываем прелоадер
    var num = 6; //чтобы знать с какой записи вытаскивать данные

    $(function() {
    $("#load .button").click(function(){
    $(".button").next("#imgLoad").show();

    $.ajax({
    url: "action.php",
    type: "GET",
    data: {"num": num},
    cache: false,
    success: function(response){

        if (response == 0){ // Смотрим ответ от сервера и выполняем соответствующее действие
          $("#imgLoad").hide();
        }
        else {
          var $elems = $( response );
          //добавляем элементы masonry с помощью appended
          $('.grid').append( $elems ).masonry( 'appended', $elems ).imagesLoaded(function() {
            $('.grid').masonry({
              itemSelector: '.grid-item',
              columnWidth: '.grid-sizer',
              gutter: '.gut',
              percentPosition: true
            });
            // если высота больше 500, то удалить кнопку "раскрыть"
            $(".grid-item div").each(function(){
              if ($(this).height() &lt; 500){
                $(this).children(".expan").remove();
              }
            });
          }); 
          num = num + 5;
          $("#imgLoad").hide();
    
          // функция раскрыть/скрыть 
          $(".grid-item .expan").click(function(){
            $(".grid .grid-item").css({"maxHeight": "500px"});
            $(".grid-item .expan").text("раскрыть");
    
            if ($(this).parent().parent().attr("class") == 'grid-item inn'){
              $(this).parent().parent().removeClass('inn').css({"maxHeight": "500px"});
            }
            else {
              $('.grid-item').removeClass('inn');
              $(this).text("скрыть");
              $hei = $(this).parent().height();
              $hei += 50;
              $(this).parent().parent().addClass('inn').css({"maxHeight": $hei + "px", "height": $hei + "px"});
            }
            $('.grid').imagesLoaded(function() {
              $('.grid').masonry();
            });
          });
        }
      }
    });
    

    });
    });
    });



  • You'll change better. $(".grid-item .expan").click(function() Something like that: $('body').on('click', '.grid-item .expan', function() Then the function will work with all elements that will be loaded with ajax or created by another dynamic method.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2