Question

我正在项目中使用masonry jquery插件：（http://desandro.com/resources/jquery-masonry）

基本上我在网格中有一组方框（缩略图）。单击一个时，我希望它扩展到更大的尺寸以显示更多内容（其他图像和文本）。我正在努力解决如何使缩略图消失，然后在展开的框中显示新内容。我不知道如何显示新内容或将其存储在我的页面上 - 它需要一个关闭按钮？插件的创建者给了我一个扩展部分的快速提示，但是我使用的代码有一个设置的高度和宽度，我希望它们可以根据扩展状态中的内容量而变化。

到目前为止，这是我的jquery代码： http://pastie.org/1002101

这是我想要实现的行为的类似示例（除了我的框将具有不同的扩展尺寸）：（http://www.learnsomethingeveryday.co.uk）

您还会从该示例中注意到，它一次只能扩展1个框 - 我还希望拥有该功能。

对不起所有的问题 - 我对jquery很新，任何帮助都会很棒！

Answer 1

试试这个（demo here）：

$(document).ready(function(){

 $('#grid').masonry({
    singleMode: false,
    itemSelector: '.box',
    animate: true
 });

 $('.box').click(function(){
  if ($(this).is('.expanded')){
   restoreBoxes();
  } else {
   restoreBoxes();
   $(this)
    // save original box size
    .data('size', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $('#grid').masonry();
    })
    .addClass('expanded');
  }

  function restoreBoxes(){
   var len = $('.expanded').length - 1;
   $('.expanded').each(function(i){
    var box = $(this).data('size');
    $(this).animate({
      width: ( box[0] || 100 ),
      height: ( box[1] || 'auto' )
     }, function(){
        if (i >= len) {
       $('#grid').masonry();
      }
    })
    .removeClass('expanded');
   })
  }
 });
});

更新：嗨Jam，我不知道你给我发了评论，下次请在答案下添加评论或更新你的问题。你也可以在这个人的名字前加上“@”，他们会得到一个消息标志。

在回答您关于设置大小和隐藏内容的问题时，我修改了demo（包括几乎所有HTML和CSS）以显示不同的宽度框。单击框展开以包含所有隐藏内容有一个小问题。通常，隐藏内容的高度和宽度为零。但是jQuery能够确定隐藏的内容大小，但它仍然存在一些问题，因为您可能需要限制隐藏内容的宽度或高度。所以我最终做的是在框内添加隐藏内容并在框中添加data-size属性，其中包含展开的隐藏内容的宽度和高度，例如：

<div class="box" data-size="380,380">
    <p>This is the visible content.</p>
    <div class="expandable">
        This is the hidden content which shows when the box is clicked.
    </div>
</div>

我还提供了一种在展开框时隐藏可见内容的方法，方法是在内容中添加hideable类，因为您提供的图片似乎隐藏了原始内容：

<div class="box" data-size="380,380">
    <p class="hideable">This is the visible content.</p>
    <div class="expandable">
        This is the hidden content which shows when the box is clicked.
    </div>
</div>

如果未设置data-size属性，则脚本将默认为defaultSize设置：

注意根据砌体作者的建议，演示使用的是$(document).ready(function(){...})而不是$(window).load(function(){...})，因为jFiddle只是不想使用窗口加载。

$(window).load(function () {

    var defaultSize = [180, 180]; // expanded box size: [width , height]
    $('#grid').masonry({
        singleMode: false,
        columnWidth: 100,
        resizeable: true,
        itemSelector: '.box',
        animate: true
    });

    $('.box').click(function () {
        if ($(this).is('.expanded')) {
            restoreBoxes();
        } else {
            var size = ($(this).attr('data-size')) ? $(this).attr('data-size').split(',') : defaultSize;
            $(this)
            // save original box size
            .data('size', [$(this).width(), $(this).height()]).animate({
                width: size[0],
                height: size[1]
            }, function () {
                // show hidden content when box has expanded completely
                $(this).find('.expandable').show('slow');
                $(this).find('.hideable').hide('slow');
                $('#grid').masonry();
            });
            restoreBoxes();
            $(this).addClass('expanded');
        }

        function restoreBoxes() {
            var len = $('.expanded').length - 1;
            $('.expanded').each(function (i) {
                var box = $(this).data('size');
                $(this).find('.expandable').hide('slow');
                $(this).find('.hideable').show('slow');
                $(this).animate({
                    width: (box[0] || 100),
                    height: (box[1] || 'auto')
                }, function () {
                    if (i >= len) {
                        $('#grid').masonry();
                    }
                }).removeClass('expanded');
            })
        }
    });
});

Answer 2

抱歉，我还不能评论其他问题（因此答案框）

@fudgey

我有这个使用jquery过滤器fudgey帮助我。我的问题是，无论出于何种原因，在谷歌浏览器中，砌体项目似乎没有完成页面加载的定位。单击某些内容后，一切正常，只是初始页面加载有问题。我在哪里/如何设置砌筑的加载时间？

此外，无论如何都有一个指针光标在这？目前，用户不知道单击元素。

Answer 3

我对此有所了解。您可以将代码更改为：

$('.box').click(function(){
   restoreBoxes();
   $(this)
    // save original box size
    .data('size', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $('#grid').masonry();
    })
    .addClass('expanded');
  }

 $( '.expanded' ).find('.main_img').click(function() {
    restoreBoxes();
 });

你仍然需要定义restoreBoxes函数的代码和顶部对Masonry的调用，我只需要包含需要添加的代码。所以完整的代码看起来像这样：

$(document).ready(function(){

 $('#grid').masonry({
    singleMode: false,
    itemSelector: '.box',
    animate: true
 });

 $('.box').click(function(){
   restoreBoxes();
   $(this)
    // save original box size
    .data('size', [ $(this).width(), $(this).height() ])
    .animate({
      width: 335,
      height: 335
     }, function(){
      $('#grid').masonry();
    })
    .addClass('expanded');
  }

  $( '.expanded' ).find('.main_img').click(function() {
      restoreBoxes();
  });

  function restoreBoxes(){
   var len = $('.expanded').length - 1;
   $('.expanded').each(function(i){
    var box = $(this).data('size');
    $(this).animate({
      width: ( box[0] || 100 ),
      height: ( box[1] || 'auto' )
     }, function(){
        if (i >= len) {
       $('#grid').masonry();
      }
    })
    .removeClass('expanded');
   })
  }
 });
});

我不确定这是否是最有效的方式，但我在我正在努力的网站上尝试了一个版本并且成功了。只有当您使用类“.main_img”单击展开的div中的图像时，才会使div折叠。您可以使用您想要的任何类名替换它，但请确保您要单击以关闭div的图像具有此类。如果你想扩展div中的任何图像来关闭div，你可以简单地使用“img”而不是“.main_img”。让我知道这是如何工作的，如果你有任何错误，请在这里发布。

帮助Jquery + Masonry插件：如何展开/折叠框以显示内容

3 个答案: