Question

所以我试图让我的帖子处于网格布局中。我会尽力展示自己所处的位置。所以这些帖子想要用马赛克瓷砖。我用它来实现它：

http://sapegin.github.io/jquery.mosaicflow/

现在因为我在本地构建这个，所以很难显示一个实例。我已将文件放在我的Wordpress主题中，并且html页面按照马赛克演示的文件工作，但当我将完全相同的代码带入Wordpress页面时，所有图像都只是坐在左侧而不是平铺

我删除了我的样式表（无论如何它都是空白的）所以那里没有冲突。我试过将链接移动到jQuery和Javascript文件，但仍然不知道？也许我错过了什么？

所以这是我的homepeage代码：

<?php get_header(); ?>






<!--<div id="site-description"><?php bloginfo( 'description' ); ?></div>-->

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>





<?php get_template_part( 'entry' ); ?>
<?php comments_template(); ?>
<?php endwhile; endif; ?>

<?php get_template_part( 'nav', 'below' ); ?>



<style>
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    }

body {
    font-family:"Helvetica Neue", Arial, sans-serif;
    }

.mosaicflow__column {
    float:left;
    }

.mosaicflow__item {
    position:relative;
    }
    .mosaicflow__item img {
        display:block;
        width:100%;
        max-width:500px;
        height:auto;
        }
    .mosaicflow__item p {
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        margin:0;
        padding:5px;
        background:hsla(0,0%,0%,.5);
        color:#fff;
        font-size:14px;
        text-shadow:1px 1px 1px hsla(0,0%,0%,.75);
        opacity:0;
        -webkit-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
           -moz-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
             -o-transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
                transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
        }
    .mosaicflow__item:hover p {
        opacity:1;
        }
    </style>





<div class="mosaicflow" data-item-height-calculation="attribute">
        <div class="mosaicflow__item">
            <img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-20_5D_1287_Artem_Sapegin.jpg"  alt="">
            <p>Dessi the Dachshund</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-24_5D_2066_Artem_Sapegin.jpg"  alt="">
            <p>Tsiri on Baltic Sea</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3178_Artem_Sapegin.jpg"  alt="">
            <p>Ciyar the Saluki</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2551_Artem_Sapegin.jpg"  alt="">
            <p>Tsiri Having Fun by the Sea</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2323_Artem_Sapegin.jpg"  alt="">
            <p>Dessi Meets the Sea</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-05-19_5D_9670_Artem_Sapegin.jpg"  alt="">
            <p>Tsiri the Saluki</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-20_5D_1165_Artem_Sapegin.jpg"  alt="">
            <p>Dessi on a Waterfall</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="200" src="http://sapegin.github.com/jquery.mosaicflow/img/2011-05-28_5D_4035_Artem_Sapegin.jpg"  alt="">
            <p>Dessi in Dandelion Field</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-12-09_5D_3758_Artem_Sapegin.jpg"  alt="">
            <p>New Year Postcard from Tsiri and Ciyar</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3422_Artem_Sapegin.jpg"  alt="">
            <p>Beautiful Afghan Hound Girl</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-10-21_5D_3414_Artem_Sapegin.jpg"  alt="">
            <p>Running Ciyar and Afgan Girl</p>
        </div>

        <div class="mosaicflow__item">
            <img width="300" height="300" src="http://sapegin.github.com/jquery.mosaicflow/img/2012-08-26_5D_2378_Artem_Sapegin.jpg"  alt="">
            <p>Dessi Walking on a Sea Shore</p>
        </div>
    </div>


    <script src="jquery.mosaicflow.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>















<!--<?php get_sidebar(); ?>-->




<?php get_footer(); ?>

Answer 1

你需要调用jQuery 之前你调用马赛克流程库，它应该修复它。

用于博客文章的Wordpress马赛克拼贴

1 个答案: