Масонство не работает с динамическим контентом

Масонство не работает с моим динамическим контентом, я не знаю почему. Я не думаю, что это ошибка на моей стороне, по крайней мере, я просмотрел код в течение нескольких часов, и я не могу найти ничего, что не работает.Масонство не работает с динамическим контентом

//reads listbox.php and cycles through the array calling createbox 
function listboxs() { 
    $.ajax({ 
     url: '_php/listbox.php', 
     success: function (output) { 

      var jsonArray = $.parseJSON(output); 

      $.each(jsonArray, function (i, box) { 
       createbox(box.id, box.name, box.link, box.description, box.tags); 
      }); 
     } 
    }); 
} 

//create the code for 1 box 
function createbox(id, name, link, description, tags) { 

    var boxHtml = "", 
     tagsHtml = "", 
     descriptionHtml = ""; 

    boxHtml = '' + '<div class="box" id="' + id + '">' + '<div class="boxinfo">' + '<label class="boxname"><a href="' + link + '" class="boxlink" target="_blank">' + name + '</a></label>'; 

    $.each(tags, function (i, tag) { 
     tagsHtml += '<label class="boxtag">' + ((!tag.name) ? tags[i] : tag.name) + '</label>'; 
    }); 

    //if(description.trim().length > 0){ 
    descriptionHtml = '<textarea class="boxdescription" readonly rows="1">' + description + '</textarea>'; 
    //} 

    boxHtml += tagsHtml + '</div>' + descriptionHtml + '</div>'; 

    $content.html($content.html() + boxHtml); 
}

Ниже приводится упрощенный HTML:

<!DOCTYPE html> 
<html> 

    <head> 
     <link rel="stylesheet" type="text/css" href="_css/index.css" /> 
     <link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' 
     type='text/css'> 
     <link href='http://fonts.googleapis.com/css?family=Rosario' rel='stylesheet' 
     type='text/css'> 
     <script src="_resources/jquery-2.0.3.min.js" type="text/javascript" language="javascript"></script> 
     <script src="_resources/masonry.pkgd.min.js"></script> 
     <script type="text/javascript" language="javascript"> 
      $('#content').masonry(); 
     </script> 
    </head> 

    <body> 
     <div id="content" class="js-masonry"></div> 
    </body> 

</html>

Я знаю, что я не нужен встроенный JavaScript, Вызывающую кладку по содержанию, но это один из моих многочисленных тестов ...

Ниже является частью CSS:

#content{ 
padding: 15px; 
min-height: 400px; 
} 

/* 
################################ 
box 
*/ 

.box{ 
border: 1px solid black; 
float: left; 
padding: 5px; 
background: #F0F0F0; 
margin-left: 5px; 
margin-bottom: 5px; 
} 

.boxinfo{ 
border-bottom: 1px solid black; 
} 

.boxname{ 
font-weight: bold; 
} 

.boxdescription{ 
border: none; 
outline: none; 
background: white; 
overflow: hidden; 
} 

.boxtag{ 
margin-left: 5px; 
} 

#boxdecoy{ 
height: 45px; 
} 

.boxname, .boxtag, .boxdescription{ 
font-family: 'Rosario', sans-serif; 
font-size: 12px; 
} 

.boxlink{ 
text-decoration: none; 
color: black; 
} 

.boxlink:hover{ 
text-decoration: underline; 
}

Я действительно схожу с ума от всего этого, потому что я тестировал создание коробки (это означает написание в html) по содержанию, и если я делаю кладки, отлично работает. Если я создаю их через функцию, которую вы видите там, она не работает ... я вызываю списки прямо в начале файла javascript после того, как объявляю все свои vars ...

Надеюсь, что я был чист, и вы можете Помоги мне.

источник

2013-08-27 InquiSab

Вы должны использовать метод appended. От docs:

Добавить и выложить новые элементы добавленного элемента.

Посмотрите на этот jsfiddle

Try изменить код

boxHtml += tagsHtml + 
     '</div>' + 
    descriptionHtml + 
'</div>'; 

var $boxHtml = $(boxHtml); 

$content.append($boxHtml).masonry('appended', $boxHtml);

источник

2013-08-28 08:18:53 Grin

Это действительно работало, однако каменная кладка на самом деле не выглядит корректно, я думаю. Дивы расположены неправильно, они немного сверху друг на друга. Я протестировал применение $ content.masonry() к действию. Нажмите кнопку, а затем разместите их правильно. Есть идеи? Я также поместил $ content.masonry() после каждого цикла в listBoxs(), и ничего не происходит. Весело, если я просто увеличиваю/уменьшаю на своей странице, то он помещает divs правильно. – InquiSab

У вас есть изображения в ваших коробках, или вы можете применить к ним какое-либо преобразование java-script (например, равномерное и т. Д.)? Масонство использует абсолютное позиционирование в зависимости от размера элемента. Поэтому, если размер немного изменится, это вызовет перекрытие. Подробнее [здесь] (http://masonry.desandro.com/faq.html#overlapping). – Grin

Добавление к ответу Грина:

Вы также должны применять масонства-параметры данных = '{ " columnWidth ": 200," itemSelector ":" .item "} 'для вашего # контейнера.

<div id="content" class="js-masonry" data-masonry-options='{ "columnWidth": 200, "itemSelector": ".item" }'></div>

Вроде так. Это может помочь с ответом вашего комментария. У меня нет ответа, чтобы ответить в качестве комментария.

источник

2013-08-28 10:03:48 FPJ

Это действительно сработало, но если я изменю ширину, чтобы сказать 50, она все равно работает, однако 60 нет. Масонство действует действительно странно, спасибо. – InquiSab

Масонство не работает с динамическим контентом

ответ

Смежные вопросы