小编Chr*_*ris的帖子

我试图让我的同位素帖子页面使用" 加载更多"按钮(如下所示:https://codepen.io/bebjakub/pen/jWoYEO).我有代码在Codepen上工作,但我无法在网站上工作.

工作Codepen(我的(过滤和加载更多) - https://codepen.io/whitinggg/pen/qyvVwz

实时页面链接 - 这里

我目前在控制台中看到关于我的isotope.js文件的错误:

Uncaught TypeError: Cannot read property 'filteredItems' of undefined
    at loadMore (isotope.js?v=2.2.7:53)
    at HTMLDocument.<anonymous> (isotope.js?v=2.2.7:48)
    at i (jquery.js?ver=1.12.4:2)
    at Object.fireWith [as resolveWith] (jquery.js?ver=1.12.4:2)
    at Function.ready (jquery.js?ver=1.12.4:2)
    at HTMLDocument.K (jquery.js?ver=1.12.4:2)

任何人都可以帮助解决此错误的含义吗？请帮我解决一下.

我的Isotope.js文件

jQuery(function ($) {


    // with jQuery
    var $container = $('.grid').isotope({
      itemSelector: '.grid-item',
      layoutMode: 'packery',
      columnWidth: '.grid-sizer',
      packery: {
        gutter: '.gutter-sizer'
      }
    });

     //Add the class selected to the item that is clicked, and remove from the …

我一直试图在div的底部添加Skew/Slant.我已经取得了一些成功,正如你在我的JSFiddle中可以看到的那样,我已经设法应用了偏差,但这并不完全是我想要的.

https://jsfiddle.net/hcow6kjr/

目前,歪斜应用于图像所在的div的顶部和底部,此歪斜似乎也应用于图像本身(如果您关闭歪斜,您将看到图像稍微旋转回正常).我想知道是否可以进行以下调整,以及我如何进行调整......

1 - 仅将歪斜应用于图像所在div 的底部,而不是当前两者.

2 - 不对图像应用歪斜,使图像平放(如果有意义).

HTML

<div>
<h1>
<img src="http://www.visiontechautomotive.co.uk/visiontech/wordpress/wp-content/uploads/2016/08/visiontech-hero-test-1.jpg">
</h1>
</div>

CSS

div {
  background-image: green;
  height: 700px;
  padding: 20px;
  margin-top: 100px;
  -webkit-transform: skewY(-2deg);
  -moz-transform: skewY(-2deg);
  -ms-transform: skewY(-2deg);
  -o-transform: skewY(-2deg);
  transform: skewY(-2deg);
  overflow:hidden;
}

提前致谢.