标签: jquery-isotope

我最近发现了Masonry和Isotope JQuery插件.它们似乎在功能上几乎完全相同,似乎都有相同的作者.我能看到的唯一明显区别是许可证.

这两者在功能方面有哪些主要区别？你为什么要用另一个呢？

可能重复:
如何在DIV中居DIV？

请看下面的图片:

如何使灰色方块在红色容器div内水平居中？这都是用同位素制成的,所以请记住这一点.

提前致谢.

即使父(红色)div总是在中间对齐,灰色,较小的div也不是.在顶部图像中,当它们在一列中对齐时,该列应位于包装器(红色)div的正中间.

我打算在打开时将一些模型数据传递到模态窗口.当用户点击一个元素时,我想让模态窗口打开,并显示与点击内容有关的更多详细信息.

除了将数据传递到模态窗口之外,我已经创建了一个按照我想要的方式工作的plunker.

我试图使用ng-click传递数据:

<img ng-src="{{item.picture}}" width="100" ng-click="open(item)"/>

谁能帮我这个？还是指出我正确的方向？

我正在尝试使用角度加载div来为同位素提供布局.出于某种原因,我不能使用ng-repeat来创建div.当我做类似的事情,它工作正常:

[agg.html]

<div class="mygrid" iso-grid>
    <div class="item">myitem</div>
</div>

[controlers.js]

module.directive('isoGrid', function () {
    return function (scope, element, attrs) {
        element.isotope({
            itemSelector: '.item'
        });
    };
});

module.controller('aggViewport', ['$scope', '$location', function ($scope, $location) {
    $scope.cards = [{
        "ID": "myid",
        "class": "cardListTile",
        "badge": "1"
    } {
        "ID": "myid2",
        "class": "cardListTile",
        "badge": "2"
    }]
}]);

虽然上面的工作正常,但是当我尝试从角度使用ng-repeat时,div似乎变得不可见(它们在dom中,但我看不到它们).我试过调用同位素('reloadItems')和同位素('reLayout'),但它似乎没有帮助.

[agg.html]

<div class="mygrid" iso-grid ng-repeat="card in cards">
    <div class="item">myitem</div>
</div>

我怎样才能使用ng-repeat？

当心!

Isotope的GitHub仓库还有待处理的功能请求问题,如果您有兴趣查看官方文档和演示(如何结合同位素,无限滚动,过滤和排序),您应该添加一个""反应.它由Isotope的创造者打开以衡量兴趣.如果有兴趣,请upvote!

TL; DR:为了帮助获得官方文档和演示,请转到此处并添加""反应.

尝试使用Isotope JS插件和Paul Irish(可悲的是未维护的)Infinite Scroll插件拼凑出可过滤的布局.

过滤有点工作.最初它过滤第1页内容.为了过滤不在页面1上的项目,我需要向下滚动(我想这是将元素带入浏览器的内存中,从而使其可用于过滤脚本？)

通过一组初始页面内容的选择框(即:第1页的内容).

问题1: 如何让过滤器适用于所有页面项？ie:如何引用过滤器脚本中的所有元素,即使那些尚未通过无限滚动进入页面的元素？

问题2: 一旦我向下滚动并且所有元素都是可过滤的,窗口就不会在过滤时调整大小.因此,当通过过滤器只显示一个或两个元素时,仍然可以向下滚动页面(即使没有显示任何元素).在检查了这些元素后,我发现它们仍然在DOM中.

过滤脚本

function filterTags(){
  isotopeInit();

  var $checkboxes = $('#tag-wrap input')

  $checkboxes.change(function(){
    var arr = [];
    $checkboxes.filter(':checked').each(function(){
      var $dataToFilter = $(this).attr('data-filter');
      arr.push( $dataToFilter );
    });
    arr = arr.join(', ');
    $container.isotope({ filter: arr });
  });
};

同位素初始化

function isotopeInit(){
  var $container = $('.post-excerpts').imagesLoaded( function() {
    $container.isotope({
      itemSelector: '.post-excerpt-block-wrap',
      layoutMode: 'masonry',
      animationEngine: "best-available",
      masonry: {
        columnWidth: '.post-excerpt-block-wrap' 
      },
      transitionDuration: '2.0',
       hiddenStyle: …

我正在尝试制作一个从json(不是真正的json,更像是javascript数组)加载的图像表,每次json更改时(当我用一些脚本将新图像附加到json文件时,我想要那个我上传的图片表也是如此.

这是json格式:

[{
    "image": "images/set_1_UTC+03.jpg",
    "weight": 101
}, {
    "image": "images/set_1_UTC+03.jpg",
    "weight": 102
}, {
    "image": "images/set_1_UTC+03.jpg",
    "weight": 103
}, {
    "image": "images/set_1_UTC+03.jpg",
    "weight": 104
}]

为此,我使用同位素.我设法实现了上面提到的所有内容,唯一的问题是我想让图像可以点击,每当我点击其中一个图像时,让它的尺寸更大,当我再次点击它以回到小尺寸时.这是代码:

<script>
    var previous = 0;
    var current = 0;
    loadJSON(function(response) {
        // Parse JSON string into object
        current = JSON.parse(response);
    });

    function loadJSON(callback) {
        var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
        xobj.open('GET', 'data.json', true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function() {
            if (xobj.readyState == 4 && xobj.status == …

使用jQuery Isotope开始了一个项目.最初与无限卷轴集成,但认为它有点笨重.

希望用Lazy Load取代Infinite Scroll,并想知道是否有人将这两者结合起来.让他们玩得好的任何提示都会很棒.

谢谢一家工厂

我使用以下代码片段来促进我的同位素实现的实时搜索.

它工作得很好,但我想知道是否有办法限制它搜索的范围.

我们的同位素返回HTML如下:

<div class="item">
<span class="title"></span>
<span calss="description"></span>

现在它搜索所有内容,我如何限制它只过滤"标题"字段的结果？

jQuery(document).ready(function($) {
    $(document).ready(function(){

        var $container = $('#portfolio'),

        // create a clone that will be used for measuring container width
        $containerProxy = $container.clone().empty().css({ visibility: 'hidden' });   

        $container.after( $containerProxy );  

        // get the first item to use for measuring columnWidth
        var $item = $container.find('.portfolio-item').eq(0);
        $container.imagesLoaded(function(){
            $(window).smartresize( function() {

                // calculate columnWidth
                var colWidth = Math.floor( $containerProxy.width() / 5 ); // Change this number to your desired amount of columns

                // …

我正在检查React.js并试图弄清楚这个库如何与Isotope.js一起工作.React的文档说它可以很好地与其他库一起使用,但是将它与自己更改DOM的库一起使用似乎没有使用React的意义.

有人可以向我解释一下,如何在我使用Isotope.js作为布局的webapp中利用React？

使用Isotope插件,我试图实现一个排序系统,通过单击一个项目,通过在单击的项目后定位相同类型的项目来形成组.

Isotope的排序/过滤功能似乎并不是为此目的而设计的,所以我最初的方法是使用.insertAfter重新排列DOM,然后触发'reLayout'.

但是,似乎在初始化之后,DOM顺序不相关,并且没有什么能够破坏和重新初始化Isotope,但这会导致不希望的滚动位置跳转.

(见:http://jsfiddle.net/owenhoskins/r7MgY/10896/)

是否有办法在没有重新初始化的情况下基于DOM结构更新Isotope？

或者,是否可以设想与排序/过滤功能接口以实现此目标？

提前谢谢,欧文