Проблема с перекрытием изображений каменной кладки

название в значительной степени говорит все, я просмотрел плагин изображений из каменной кладки, но мне не повезло, интересно, может ли кто-нибудь помочь?

Сценарий делает много вещей, у него есть бит фильтра, анимация, отображение/скрытие, ajax для получения контента и т.д. и т.п. код ниже:

 jQuery(function(){
   jQuery('#container').masonry({
   itemSelector: '.box',
   animate: true
   });
  });



   (function ($) {
// Get all menu items with IDs starting with "filter-" and loop over them
$(".menu li[id|=filter]").each(function () {
    // Get the ID add extract the page class name from it (remove "filter-"       from it)
    var type = $(this).attr("id").replace("filter-", "");
    // Get the items in the "webbies" list with that class name
    var items = $("#container div[class~=" + type + "]");
    // Don't do anything if there aren't any
    if (items.length == 0) return;
    // Get a list of the other items in the list
    var others = $("#container>div:not([class~=" + type + "])");
    // Add a click event to the menu item
    $("a", this).click(function (e) {
        // Stop the link
        e.preventDefault();
        // Close open item
        if (openItem) {
            close(openItem);
        }
        items.removeClass("inactive").animate({opacity: 1});
        others.addClass("inactive").animate({opacity: 0.2});
    });
});

$(".reset-filter a").click(function (e) {
    e.preventDefault();
    if (openItem) close(openItem);
    $("div.box.inactive").removeClass("inactive").animate({opacity: 1});
});

var openItem;

// Opens an item
var open = function (item) {
    // Close open item
    if (openItem) close(openItem);
    item.addClass("loading");
    $("img", item).first().hide();
    item.width(340);
    item.height(600);
    if (!item.data('loaded')) {
        $("div.fader", item).load($("a", item).first().attr("href") + " #content", function () {
            stButtons.locateElements();
            stButtons.makeButtons();
            stWidget.init();
            $("#container").masonry('reloadItems', function () {
                $("div.fader", item).animate({opacity: 1}, function () {
                    item.removeClass("loading");
                    $('<a href="#"  class="close">Close</a>"').appendTo(this).click(function (e) {
                        e.preventDefault();
                        close(item);
                        $(document).scrollTo(   $("#navigation-block"), 600, {offset:-50} );
                    });
                    $("div.info", item).fadeIn("slow", function () {
                        $(document).scrollTo( $(".info"),  600, {offset:80} );
                    });
                });
            });
            item.data('loaded', true);
        });
    } else {
        item.removeClass("loading");
        $("#container").masonry('reloadItems', function () {
            $("div.fader", item).animate({opacity: 1}, function () {
                $("div.info", item).fadeIn("slow", function () {
                    $(document).scrollTo( $(".info"), 600,                    {offset:80} );
                });
            });
        });
    }

    // Set open item
    openItem = item;

};

// Closes an item
var close = function (item) {
    $("div.fader", item).animate({opacity: 0});
    $("div.info", item).hide();
    item.animate({width: 150, height: 100}, function () {
        $("img", item).first().fadeIn("slow");
        $("#container").masonry('reloadItems');
    });

    // Reset open item
    openItem = null;
};

$("#container div.box").each(function () {
    var item = $(this);
    item.data('loaded', false);
    $("div.fader", item).css("opacity", 0);
    $("a.close", item).click(function (e) {
        e.preventDefault();
        close(item);
        $(document).scrollTo( $("#navigation-block"), 600, {offset:-50} );
    });
    $("a.showMe", item).click(function (e) {
        e.preventDefault();

        if (item.hasClass("inactive")) return;
        open(item);
    });
}); 
    })(jQuery);
    </script>

person rob.m    schedule 01.11.2011    source источник
comment
Возможно, это связано с этим wordpress .stackexchange.com/questions/60635/   -  person Diana    schedule 02.08.2012


Ответы (2)


 jQuery(function(){
   var $container = $('#container');
   $container.imagesLoaded( function () {
       itemSelector: '.box',
       animate: true
   });
  });

Источник: изображения jQuery Masonry

person vette982    schedule 07.03.2013
comment
Лучше сказать, поскольку мой предыдущий пункт не обязательно верен, функция не может использоваться таким образом. - person Adam K; 03.03.2018

Я столкнулся с той же проблемой, и я разработал 2 метода борьбы с ней. Сначала перезагрузите контейнер после добавления изображения onclick.

1. container.masonry('reload');

Во-вторых, и, возможно, более важно, динамически корректируйте высоту окружающего элемента div, чтобы она соответствовала высоте изображения:

2. // bricks correct height
   var brick = $("#marker #container .brick"); 
   brick.each(function() {
          var content = $(this).find(">div");
          var img = $(this).find("img");
           content.css({
            height: img.attr("height")
           });
        });

Итак, мой кирпич выглядит так:

  <div style="height: 284px; position: static; top: -133px;" class="test">  
       <a class="arrow" href="#" target="_self"><img class="img" src="test.jpg" width="374" height="284"></a>
  </div>

Изменить: в вашем коде та же проблема, в стиле нет высоты.

<div style="position: absolute; left: 330px; top: 280px;" class="box item 3d">

И мне кажется у вас тоже проблема с шириной. Я думаю, вам нужно использовать меньшую ширину для столбца. Хорошим значением будет ширина маленького изображения и некоторая рамка.

person Gigamegs    schedule 01.11.2011
comment
мм, это имеет смысл и многообещающе, спасибо. Попробую и отвечу - person rob.m; 01.11.2011
comment
Это допустимое решение только в том случае, если у вас уже определены размеры изображения. Если это так, блочная модель позаботится о любом перекрытии. Задавать высоту/ширину явно излишне. - person desandro; 03.11.2011