我有一种社交网络,用户在有或没有图像的情况下发帖,我遇到了jquery collagePlus的问题,因为有时它会以完美的拼贴显示我的图像,但是当按下F5或Ctrl + F5键时它会加载再次页面和拼贴不起作用,然后我按F5进行相同的过程,它再次工作。我不知道原因。也许是我的JS中的问题或问题。你可以帮帮我吗?非常感谢你。
以下是拼贴效果良好的图片:Image of the perfect collage
以下是F5或Ctrl + F5后拼贴画无效的图片:collage not working after F5 or Ctrl + F5
$(document).ready(function(){
$.post("process/posts-list.php", {
id_user : $("#iduser").val()
}).done(function(data){
$("#cont_posts").html(data);
// Here we apply the actual CollagePlus plugin
$('div.Collage').removeWhitespace().collagePlus({
'fadeSpeed' : 'fast',
'targetHeight' : 200,
'effect' : 'default',
'direction' : 'vertical',
'allowPartialLastRow' : false
}
}).fail(function(error){
alert(error.responseText);
});
});
<div id="cont_posts" class="container">{Here goes the list of posts extracted in the method list() on JS file}</div>
由jqueryCollagePlus获取的HTML
<div class="Collage effect-parent" style="padding-right:0px; padding-left:0px; text-align:center;">
<div class="Image_Wrapper" style="width: 420px; height: 176px; margin- bottom: 0px; margin-right: 0px; display: inline-block; vertical-align: bottom; overflow: hidden; opacity: 1;">
<a>
<img src="img/6255923139175840/3201602161358461149.jpeg" style="width: 420px; height: 176px;">
</a>
</div>
<div class="Image_Wrapper" style="width: 420px; height: 165px; margin-bottom: 0px; margin-right: 0px; display: inline-block; vertical-align: bottom; overflow: hidden; opacity: 1;">
<a>
<img src="img/6255923139175840/3201602161358468171.jpeg" style="width: 420px; height: 165px;">
</a>
</div>
<div class="Image_Wrapper" style="width: 420px; height: 421px; margin-bottom: 0px; margin-right: 0px; display: inline-block; vertical-align: bottom; overflow: hidden; opacity: 1;">
<a>
<img src="img/6255923139175840/3201602161358462628.jpeg" style="width: 420px; height: 421px;">
</a>
</div>
</div>
另外,我使用了来自jqueryCollagePlus
的这些JS文件<script src="js/jquery.collagePlus.js"> </script>
<script src="js/jquery.removeWhitespace.js"></script>