Question

有人能给我一个html页面的工作示例，使用masonry插件加载json数据的内容吗？

我有这段代码，但它没有加载任何内容：

PHP文件：

<?php
$con = mysqli_connect("localhost", "*", "*", "scratch");
mysqli_query($con,"SET NAMES UTF8");  //é preciso meter isto em utf-8 senão não manda nada
if (!$con)
    {
    die('Could not connect: ' . mysqli_error());
    } 
$result = mysqli_query($con,"SELECT * FROM posts ORDER BY IdPost DESC") or die;
while($row = mysqli_fetch_assoc($result))
  {
    $output[]=$row;
  }  

print(json_encode($output, JSON_UNESCAPED_UNICODE));

mysqli_close($con);

?>

所以，它给了我这个json：

[{＆＃34; IdPost＆＃34;：＆＃34; 5＆＃34;，＆＃34; Title＆＃34;：＆＃34; Social Networks Blueprints＆＃34;，＆＃34; PostContent＆＃34 ;：＆＃34;主要社交网络蓝图＆＃34;，＆＃34; TypePublic＆＃34;：＆＃34; 1＆＃34;，＆＃34; IdCategory＆＃34;：＆＃34; 1＆＃34;，＆＃34; PostDate＆＃34;：＆＃34; 2014-11-16 00：00：00＆＃34;，＆＃34; PostImage＆＃34;：＆＃34; http：//static.ddmcdn.com/ GIF / storymaker-最佳哈勃空间望远镜图像-20092-514x268.jpg＆＃34;＆＃34; ID用户所＆＃34;：＆＃34; 2＆＃34;}，{＆＃34; IdPost＆＃34 ;：＆＃34; 3＆＃34;，＆＃34;标题＆＃34;：＆＃34; *新iPhone 5 ＆＃34;，＆＃34; PostContent＆＃34;：＆＃34;检查这一新的纯技术＆＃34;，＃34; TypePublic＆＃34;：＆＃34; 1＆＃34;，＆＃34; IdCategory＆＃34;：＆＃34; 1＆＃34;，＆＃34 ; PostDate＆＃34;：＆＃34; 2014-11-16 00：00：00＆＃34;，＆＃34; PostImage＆＃34;：＆＃34; http：//images.visitcanberra.com.au/images /canberra_hero_image.jpg","IdUser":"3"},{"IdPost":"2","标题＆＃34;：＆＃34; 新的三星Galaxy S4 *＆＃34;，＆＃34; PostContent＆＃34;：＆＃34;规格很棒。检查此图形＆＃34;，＆＃34; TypePublic＆＃34;：＆＃34; 1＆＃34;，＆＃34; IdCategory＆＃34;：＆＃34; 1＆＃34;，＆＃34; PostDate＆＃34 ;：＆＃34; 2014-11-16 00：00：00＆＃34;，＆＃34; PostImage＆＃34;：＆＃34; http：//www.studiotv.com.au/wp-content/uploads /2014/07/Klimas-website-edited.jpg"，＆＃34; ID用户所＆＃34;：＆＃34; 2＆＃34;}]

现在重要的文件的HTML部分：

<div id="main">
    <div id="main-inner">
        <div id="container" class="js-masonry"data-masonry-options='{ "columnWidth": 2, "itemSelector": ".item" }'>
            <div class="gride-sizer"></div>
            <!--Open Modal faz o pop-up-->
            <div class="item open-modal">
            <!-- CCODIGO PARA 1 SECÇÃO DE COMMENTS -->
                <a href="#"> 
                    <img src="images/A.jpg"><img>
                </a>
                <div class="pinMeta">
                    <p class="pinDescription">
                    Tenda suspensa na arvore! O sonho de qualquer campista (ou qualquer bêbado) como eu! Não perca tempo, reserve já a sua!
                    </p>
                    <div class="pinSocialMeta">
                        <a class="socialItem likes" href="#">                         
                            1 like
                        </a>
                    </div>
                </div>
                <div class="pinUserAttribution">
                    <a class="attributionItem firstAttribution " href="#">
                        <img class="attributionImg" style="" src="images/profile.jpg"></img>
                        <span class="attributionTitle">
                            Publicado por
                        </span>
                        <span class="attributionName">
                            Pihh
                        </span>
                    </a>
                    <a class="attributionItem lastAttribution " href="#">
                        <img class="attributionImg" style="" src="images/profile.jpg"></img>
                        <span class="attributionTitle">
                            em
                        </span>
                        <span class="attributionName">Categoria 1</span>
                    </a>
                </div>
            </div>

它可能会错过一两个div，因为我复制粘贴了它但是在使用没有json的砌体插件时（对于固定值，它可以完美地加载）。

现在是CSS文件：

#container .grid-sizer  { width:100%;}
#container .item        { width:15%; margin: 14px 7px 0px; background-color:#fff; border-radius: 4px 4px 4px 4px; box-shadow: 0px 4px 5px #888888; }
#container .item img    { width:100%; height:400%%; border-radius: 4px 4px 0px 0px; }
#container .item img:hover { background:none repeat scroll rgba(255,255,255,0.1) }
#container .item w2 { width:200%; }
/*placed .open-modal at 400px so I can garantee that page remains in same position on when modals opened*/
.open-modal{
    position: relative;
    top: 400px;
}

所以，就是这样，我在完成这项工作时遇到了很大麻烦，而且我对这个问题一无所知（可能是因为我是html和CSS的新手，我的专长是关于android - 甚至android的asynk任务对我来说真的更容易，而且我可能遇到问题但是如果有人可以给我一段工作代码我会非常好并且开始尝试理解它。

致以最诚挚的问候，

Pihh

编辑：我完全忘记了js部分！

 <script>   
     var body = $('body');

    toggleModal = function () {
        body.toggleClass('body-locked');
        modal_container.toggleClass('dp-block');

        $.ajax({
            type: "POST",
            url: "http://localhost/website2/posts.php",
            data: '{ "pIdPost":' + $(this).attr('data-item') + ' }',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var Posts = response;
              //  var Posts = response.d;
                var $boxes;
                $.each(Posts, function (index, post) {
                    $boxes = $('<img src="' + post.PostImage + '" />');
                    $('#modal-main').html($boxes); //
                   // $('.modal-userthumb').attr('src', post.Users.UserImage);
                   // $('.modal-descriptioncreator').text(post.Users.Name + ' ' + post.Users.Surname);
                    $('.modal-descriptiontimeago').text('• 4 days ago');
                    $('.modal-descriptioncontent').text(post.PostContent);
                });
                    $('#container').append($boxes);
                    $('#container').masonry('appended', $boxes, true);
                    $('#container').masonry();


            },
            failure: function (msg) {
                alert(msg);
            }
        });
    }
  </script>

为什么不加载我的数据库数据？

0 个答案: