1

我实际上正在使用同位素http://isotope.metafizzy.co/进行 Wordpress 项目 这是我的网站： http: //ocedille.virtualibrary.fr

我已经创建了自己的 Wordpress 模板，并且在全球范围内一切都按我的预期工作。但是有些细节是不对的......我非常渴望找到解决方案。

好吧，首先我必须向您解释问题所在：

  • 当我加载网站时，您可以在几秒钟内看到我所有的全尺寸图片....太丑了！！我该怎么做才能让它不可见？

  • 然后我所有的图像/项目出现在同一行。当我将鼠标光标放在它上面时，所有图像都会移动并占据正确的位置......我希望我的图像也能在一开始就占据正确的位置！！！

  • 我怎样才能在我的项目之间有相同的响应、水平和垂直边距？我使用以下代码成功地做到了这一点：

    $container.isotope({ itemSelector: '.item', // options... resizable: false, // 禁用正常调整大小 // 将 columnWidth 设置为容器宽度的百分比 masonry: { columnWidth: $container.width() / 3 }, });

                        // update columnWidth on window resize
                    $(window).smartresize(function(){
                        $container.isotope({
                            // update columnWidth to a percentage of container width
                            masonry: { 
                                columnWidth: $container.width() / 3
                            },
                        });
                    });

我怎样才能水平地做同样的事情？（也许用 rowHeight 但我没有成功让它工作！）

请冷静，这是我的第一个 Jquery/JS 项目！我不是专家，我是来学习的！在问这里之前，我试图在很多论坛上找到我的答案，但我没有找到我的确切需求......我希望你能帮助我！

谢谢你的帮助！！

注意：对不起我的英语，我是法语……所以那不是我的母语。我希望你能理解我！

/ * **编辑* ** /

我想我找到了第一个问题的解决方案。

当我加载网站时，您可以在几秒钟内看到我所有的全尺寸图片....太丑了！！我该怎么做才能让它不可见？

我添加了以下代码：

CSS

#primary { 
display:none;}

HTML

<div id="wait"><img src="<?php echo get_template_directory_uri(); ?>/img/loader.gif" alt="loading" /></div>

JS

$("#wait").hide();
$("#primary").fadeIn();

这是一个简单的预加载器，现在我认为我对页面的加载没有丑陋的影响

你认为这是一个好的解决方案吗？有更好的吗？

你对我的其他问题有答案吗！？

谢谢

4

0 回答 0