jquery collagePlus根本不工作

时间:2016-02-16 19:06:58

标签: jquery

我有一种社交网络,用户在有或没有图像的情况下发帖,我遇到了jquery collagePlus的问题,因为有时它会以完美的拼贴显示我的图像,但是当按下F5或Ctrl + F5键时它会加载再次页面和拼贴不起作用,然后我按F5进行相同的过程,它再次工作。我不知道原因。也许是我的JS中的问题或问题。你可以帮帮我吗?非常感谢你。

  1. 以下是拼贴效果良好的图片:Image of the perfect collage

  2. 以下是F5或Ctrl + F5后拼贴画无效的图片:collage not working after F5 or Ctrl + F5

  3. 我的JS代码:

    $(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);
        });
    });
    

    我的HTML代码:

    <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>
    

0 个答案:

没有答案