标签: jquery-masonry

我有一个内部display:none样式的div内部的砌体容器.因为我有一些div,当页面加载时,它会在单击按钮时像幻灯片一样切换.这会干扰砌体测量负载高度的能力,因此砖块会从容器中溢出.

我的HTML中有一些DIV,我想点击一些div然后在div#container的中心添加一个新的div.并且页面可以reload,将第一个div放在这个新的div周围.

然而,这就是我所需要的

这是我的代码,http://jsfiddle.net/PQGGT/
还有一个window resize功能.

我在页面上有一个基本的照片布局(用于投资组合).有两种不同尺寸的图像砖,较大的图像砖与较小且正好是宽度和高度的两倍成比例,并且块或窗口之间没有边距.只有几个较大的块与几十个较小的块混合在一起.它是一个响应式设计,因此当窗口大小下降到某个宽度以下时,全尺寸网站上的列数为5%,列数为33.333%,所有列都在100%最大宽度容器内.在每块砖内,图像设置为100%宽度和CSS自动高度.我已经包含了一个线框来说明我所描述的内容.

我遇到的问题是让同位素响应流体布局.如果我在比最大宽度宽的窗口中加载页面,它会完全按预期放置块.但是,当我将浏览器窗口缩小到最大宽度以下时,块会开始变得非常不稳定,在某些变体中:堆叠在一列中; 堆叠在两列中,空列之间; 图像之间的差距; 在大图像下留下一个空行.

我可能不是很好地解释自己,但只是想知道是否有人使用具有流畅布局的Isotope并且可能有一些洞察力.

我有一个下拉菜单(ul.sub-menu)里面的项目(ul.sub-menu> li),我想应用jQuery Masonry,但我的下拉绝对定位.有没有办法做到这一点,并保持我的父元素的绝对定位？

使用Javascript

jQuery("ul > li > ul.sub-menu").masonry({
  itemSelector: '.brick',
  columnWidth: 300
});

HTML

<ul>
<li id="menu-item-9451" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9451"><a href="/solutions/" >Solutions</a>
<ul class="sub-menu">
<li id="menu-item-9458" class="brick"><a href="/solutions/internal-social-software/" >Internal Social Software</a></li>
<li id="menu-item-9457" class="brick"><a href="/solutions/video-content-managment/" >Video Content Managment</a></li>
<li id="menu-item-9456" class="brick"><a href="/solutions/enterprise-content-management/" >Enterprise Content Management</a></li>
<li id="menu-item-9455" class="brick"><a href="/solutions/secure-file-sharing/" >Secure File Sharing</a></li>
<li id="menu-item-9454" class="brick"><a href="/solutions/redaction-and-document-viewing/" >Redaction and Document Viewing</a></li>
<li id="menu-item-9453" class="brick"><a href="/solutions/real-time-business-intelligence/" >Real Time Business Intelligence</a></li>
<li id="menu-item-9452" class="brick"><a href="/solutions/mobile-enterprise-applications/" >Mobile Enterprise Applications</a></li>
</ul>
</li>
</ul>

我正在尝试使用一些包含图像的瓷砖进行砌体布局.这是我的代码:

var $mainContent = $('#main-content');

$mainContent.imagesLoaded(function() {
  $mainContent.masonry()
});

loadMore = function() {
  $.ajax({
    url: '/things',
    success: function (data) {
      var $data = $(data);
      $data.imagesLoaded(function() {
        $mainContent.append($data).masonry('appended', $data, true)
      })
    }
  })
}

$('#load-more').on('click', loadMore)

但是,当我运行此操作时,我在Chrome的控制台中收到以下错误:

Uncaught TypeError: Cannot read property 'width' of undefined

跟踪:

bB jquery.min.js:2
f.each.f.cssHooks.(anonymous function).get jquery.min.js:4
f.extend.css jquery.min.js:4
f.each.f.fn.(anonymous function) jquery.min.js:4
e.extend.access jquery.min.js:2
f.each.f.fn.(anonymous function) jquery.min.js:4
f.each.f.fn.(anonymous function) jquery.min.js:4
$.Mason._placeBrick jquery.masonry.js:246
$.Mason.layout jquery.masonry.js:172
$.Mason._appended jquery.masonry.js:352
$.Mason.appended jquery.masonry.js:341

我正在使用Masonry v.2.1.05和jQuery v1.7.2

但是,当我改为reload代替时appended,它就像在演示中一样,但我希望从底部填充帖子,我不希望重新计算所有帖子.

你知道发生了什么吗？ …

我正在我的网页上实现无限滚动,显示图像.使用砖石对齐图像.最初当页面加载时我只在#containerdiv中放入10个图像.并且使用下面的代码正确对齐所有图像,并且在chrome脚本控制台中没有错误.

var $container = $('#container');
        $container.imagesLoaded(function(){
        $('#container').masonry({
          itemSelector: '.box',
          columnWidth: 200,
          isAnimated: true
        });
    });

但是当用户向下滚动时我会这样做

$.ajax({
         url: "load.php?offset="+1+"&quantity="+1,
         success: function(html){
         if(html){
                  var $container = $('#container');
                  var $test = "<div>even doing this causes error </div>";
              $container.append($test).masonry('appended',$test);
        }
  });

现在,当我向下滚动时,我在chrome控制台中得到以下错误,并且附加的图像会堆叠起来.

 Uncaught TypeError: Object <div class....... </div>  has no method filter

我首先尝试附加一个模板，但是在无法将其附加到projects元素时遇到了相同的问题。然后尝试仅追加一个名为div的jquery对象，但似乎没有将其追加到dom元素项目中。

var projects = $('#projects');
var tmpl = template({items : list});
console.log("render html ",  $(tmpl));
var div = $('<div class="item">WHY IS THIS NOT WORKING</div>');
projects.masonry( 'appended', div, true ); 

为什么这不起作用？

请不要将我的问题视为重复.我只是没有成功尝试使用CSS显示不同大小的div

正如上面的帖子中所建议我使用了Masonry.但未能成功.我正在使用codeigniter.

这是我正在使用的CSS

#container {
    width:90%;
    margin:3% 0px 0px 10%;
}
.item {
    margin:10px 10px 10px 10px;
    float:left;
    width:240px;
    border:5px solid #f0f0f0;
    background-color:#d2dbde;
    border-radius:5px;
}

Javascript和js文件

<!-- include js files -->
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.min.js"></script>
<script type="text/javascript" src="http://www.myappdemo.com/KarmakExpo/js/jquery.masonry.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#container').masonry({
        // options
        itemSelector : '.item'
    });
});
</script>

内容

<div id="container">
    <div class="item">
        <div id="usericon" style="width:240px;height:30px;">
        <!-- content -->
        </div>
        <div id="name">
        <!-- content -->
        </div>
    <div>
    <a href="<?php echo $link; ?>">
        <img src="<?php echo …

我正在制作一个网站,其中所有内部链接使当前页面淡出并且新页面淡入.这对我来说非常有用.问题是我正在尝试将它与伟大的砌体插件结合起来.在第一个页面加载砌体确实有效,但我似乎无法弄清楚如何通过ajax重新激活新加载的内容上的砌体.我应该补充一下,当前砌体中的所有项目都会被删除,然后被新的替换.

砌体代码是这样的:

    $container = $('#container');

    $container.imagesLoaded(function(){ 
        $container.masonry({
           itemSelector: '.item',
           transitionDuration: 0
        }); 
    });

而ajax加载代码是这样的:

    var newHash      = "",
        $mainContent = $("#ajaxcontainer"),
        $ajaxSpinner = $("#loader"),
        $el;

    $('.internal').each(function() {
        $(this).attr("href", "#" + this.pathname);
    }); 

    $(document).on('click', '.internal', function() {

        window.location.hash = $(this).attr("href");

    });

    $(window).bind('hashchange', function(){

        newHash = window.location.hash.substring(1);

        if (newHash) {
            $mainContent.fadeOut(500, function() {

                $ajaxSpinner.fadeIn();
                $mainContent.load(newHash + " #container", function() {
                    $ajaxSpinner.fadeOut( function() {
                        $mainContent.fadeIn(1000);
                    });
                    $('.internal').each(function() {
                        $(this).attr("href", "#" + this.pathname);
                    });        
                });

            });
        };

    });

    $(window).trigger('hashchange');

有没有人有任何关于如何实现这一目标的意见？非常感谢你.

因此,我试图将jQuery Masonry插件(来自:http://masonry.desandro.com/)与现代化器结合使用,以便在低分辨率下杀死砌体,以便我的div恢复到居中的局部宽度布局.我承认我的javascript技能仍处于开发阶段,但我认为社区可能能够帮助我解决这个问题.

在低于768像素的分辨率下,我希望砌体在活动时被销毁,而在更大的分辨率下,如果尚未运行,我希望它能够被执行.目前一切都工作正常,除了我在我的控制台中收到此错误:无法在初始化之前调用砌体上的方法; 试图称之为'破坏'.这是我处理此任务的代码.

        $(window).load( function() {
        $('#masonry').masonry({
            transitionDuration: 10,
            columnWidth:'.sizer',
        });

        if(Modernizr.mq('screen and (max-width:767px)') && $('#masonry').masonry) {
            $('#masonry').masonry('destroy');
        }
    });

    $(document).ready(function() {
        function doneResizing() {
            if(Modernizr.mq('screen and (min-width:768px)')) {
                // action for screen widths including and above 768 pixels 
            $('#masonry').masonry({
                transitionDuration: 10,
                columnWidth:'.sizer',
            });
            }
            else if(Modernizr.mq('screen and (max-width:767px)') && $('#masonry').masonry) {
                // action for screen widths below 768 pixels 
                $('#masonry').masonry('destroy');
            }
        }

        var id;
        $(window).resize(function() {
            clearTimeout(id);
            id = setTimeout(doneResizing, 0);
        }); …